1

lzhe

2024-05-28 1875e175edd385b65026e8bb4d9e9bcd3231672f

1

 src/views/configuration/custom/addField.vue

@@ -3,30 +3,153 @@
        <el-form :model="addFieldForm" :rules="addFieldRules" :disabled="mode=='show'" ref="dialogForm" label-width="100px" label-position="center">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="字段名称" prop="code">
                        <el-input v-model="addFieldForm.test" placeholder="输入一个符合阅读习惯的简短名称，建议4个字符，最多不超过12字" clearable></el-input>
                    <el-form-item label="字段名称" prop="fieldName">
                        <el-input v-model="addFieldForm.fieldName" placeholder="输入一个符合阅读习惯的简短名称，建议4个字符，最多不超过12字" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="提示文字">
                        <el-input v-model="addFieldForm.test" placeholder="描述提示用户如何填写字段值（例如：请输入名字）" clearable></el-input>
                        <el-input v-model="addFieldForm.fieldDescription" placeholder="描述提示用户如何填写字段值（例如：请输入名字）" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="字段类型" prop="deptId">
                        <el-select v-model="addFieldForm.test" style="width: 100%" @change="deptIdChange" placeholder="选择符合业务的字段类型">
                    <el-form-item label="字段类型">
                        <el-select v-model="addFieldForm.fieldType" style="width: 100%" placeholder="选择符合业务的字段类型">
                            <el-option v-for="item in fieldTypeList" :key="item.id" :label="item.title" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 变量1 输入框 -->
                <el-col :span="24" v-if="addFieldForm.fieldType == '1'">
                    <el-form-item label="默认值">
                        <el-input v-model="addFieldForm.defaultValue" placeholder="系统默认提供的值，可不填，设置默认值会替换提示文字" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '1'">
                    <el-form-item label="文字长度">
                        <el-input-number v-model="addFieldForm.maxlength" :min="0" :max="200" label="系统默认提供的值，可不填，设置默认值会替换提示文字"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '1'">
                    <el-form-item label="输入格式">
                        <el-select v-model="addFieldForm.formatName" style="width: 100%" placeholder="选择输入框不同的输入格式">
                            <el-option v-for="item in inputTypeList" :key="item.id" :label="item.title" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 变量2 数字输入框-->
                <el-col :span="24" v-if="addFieldForm.fieldType == '2'">
                    <el-form-item label="默认值">
                        <el-input-number v-model="addFieldForm.defaultValue" :precision="addFieldForm.saveDecimalNum" @change="handleChange" :min="0" :max="999" label="系统默认提供的值，可不填，设置默认值会替换提示文字"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '2'">
                    <el-form-item label="格式">
                        <el-radio v-model="addFieldForm.format" label="0">数值</el-radio>
                        <el-radio v-model="addFieldForm.format" label="1">百分比</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '2'">
                    <el-form-item label="保留小数位">
                        <el-input-number v-model="addFieldForm.saveDecimalNum" @change="handleChange" :min="0" :max="10" label="最多不超过4位小数"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '2'" v-show="addFieldForm.format == '0'">
                    <el-form-item label="显示千分符">
                        <el-checkbox v-model="addFieldForm.isShowPercentage"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '2'">
                    <el-form-item label="限定值范围">
                        <el-input-number v-model="addFieldForm.rangeMin" :min="0" :max="9999"></el-input-number>
                        <span>-</span>
                        <el-input-number v-model="addFieldForm.rangeMax" :min="0" :max="9999"></el-input-number>
                    </el-form-item>
                </el-col>
                <!-- 变量3 多行文本-->
                <el-col :span="24" v-if="addFieldForm.fieldType == '3'">
                    <el-form-item label="默认值">
                        <el-input v-model="addFieldForm.defaultValue" type="textarea" placeholder="系统默认提供的值，可不填，设置默认值会替换提示文字" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '3'">
                    <el-form-item label="文字长度">
                        <el-input-number v-model="addFieldForm.maxlength" :min="0" :max="200" label="请输入文字最长限制字数"></el-input-number>
                    </el-form-item>
                </el-col>
                <!-- 变量4 日期选择器-->
                <el-col :span="24" v-if="addFieldForm.fieldType == '4'">
                    <el-form-item label="默认值">
                        <el-date-picker :editable="true" v-model="addFieldForm.defaultValue" style="width: 100%" :format="addFieldForm.dateFormat" :value-format="addFieldForm.dateFormat" :type="addFieldForm.dateType" placeholder="系统默认提供的值，可不填，设置默认值会替换提示文字" @change="dateChange"></el-date-picker>
                    </el-form-item>
                </el-col> 
                <el-col :span="24"  v-if="addFieldForm.fieldType == '4'">
                    <el-form-item label="日期格式">
                        <el-select v-model="addFieldForm.type" style="width: 100%" placeholder="请输入文字最长限制字数" @change="typeDateChange">
                            <el-option v-for="item in dateFormatList" :key="item.id" :label="item.title" :value="item.id"/>
                        </el-select>
                    </el-form-item>
                </el-col>
                <!-- 变量5 单选按钮-->
                <el-col :span="24" v-if="addFieldForm.fieldType == '5'">
                    <el-form-item label="选项" class="specialItem">
                        <div v-for="(item,index) in addFieldForm.radioList" class="fieldContent">
                            <el-radio v-model="item.radio" :label="1" style="margin-right: 0px;">　</el-radio>
                            <el-input v-model="item.input" clearable></el-input>
                            <span class="remove-btn" @click="removeRadio(index)">删除</span>
                        </div>
                        <div class="add-btn" @click="addRadio">添加选项</div>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.fieldType == '5'">
                    <el-form-item label="排序方式">
                        <el-radio v-model="addFieldForm.radio" label="1">横向排列</el-radio>
                        <el-radio v-model="addFieldForm.radio" label="2">纵向排列</el-radio>
                    </el-form-item>
                </el-col>
                <!-- 变量6 多选按钮-->
                <el-col :span="24" v-if="addFieldForm.fieldType == '6'">
                    <el-form-item label="选项" class="specialItem">
                        <div v-for="(item,index) in addFieldForm.checkboxList" class="fieldContent">
                            <el-checkbox v-model="item.check" style="margin-right: 15px;"></el-checkbox>
                            <el-input v-model="item.input" clearable></el-input>
                            <span class="remove-btn" @click="removeCheckbox(index)">删除</span>
                        </div>
                        <div class="add-btn" @click="addCheckbox">添加选项</div>
                    </el-form-item>
                </el-col> 
                <el-col :span="24" v-if="addFieldForm.fieldType == '6'">
                    <el-form-item label="排序方式">
                        <el-radio v-model="addFieldForm.radio" label="1">横向排列</el-radio>
                        <el-radio v-model="addFieldForm.radio" label="2">纵向排列</el-radio>
                    </el-form-item>
                </el-col>
                <!-- 变量7 下拉选择器-->
                <el-col :span="24" v-if="addFieldForm.fieldType == '7'">
                    <el-form-item label="选项" class="specialItem">
                        <div v-for="(item,index) in addFieldForm.selectList" class="fieldContent">
                            <el-input v-model="item.input" clearable></el-input>
                            <span class="remove-btn" @click="removeSelect(index)">删除</span>
                        </div>
                        <div class="add-btn" @click="addSelect">添加选项</div>
                    </el-form-item>
                </el-col> 
                <!-- 变量8 业务字段-人员-没有-->
                <!-- 变量9 默认-没有 -->
                <el-col :span="24">
                    <el-form-item label="编辑页显示">
                        <el-checkbox v-model="addFieldForm.test" disabled></el-checkbox>
                        <el-checkbox v-model="addFieldForm.updateShow"></el-checkbox>
                    </el-form-item>
                </el-col>
                <el-col :span="24" v-if="addFieldForm.updateShow">
                    <el-form-item label="支持编辑">
                        <el-radio v-model="addFieldForm.supportUpdate" label="1">是</el-radio>
                        <el-radio v-model="addFieldForm.supportUpdate" label="0">否</el-radio>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="查看页显示">
                        <el-checkbox v-model="addFieldForm.test" disabled></el-checkbox>
                        <el-checkbox v-model="addFieldForm.viewShow"></el-checkbox>
                    </el-form-item>
                </el-col>
            </el-row>
@@ -34,6 +157,7 @@
        <template #footer>
            <el-button @click="visible=false" >取 消</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="fieldSubmit">保存</el-button>
            <el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="saveSubmit">保存并继续添加</el-button>
        </template>
    </el-dialog>
</template>
@@ -43,6 +167,29 @@
        emits: ['success', 'closed'],
        data() {
            return {
                inputTypeList: [  //输入格式
                    {title: "无",id: "1"},
                    {title: "手机号码",id: "mobile"},
                    {title: "电话号码",id: "telephone"},
                    {title: "邮箱",id: "email"}
                ],
                fieldTypeList: [  //字段类型
                    {title: "输入框",id: "1"},
                    {title: "数字输入框",id: "2"},
                    {title: "多行文本",id: "3"},
                    {title: "日期选择器",id: "4"},
                    {title: "单选按钮",id: "5"},
                    {title: "多选按钮",id: "6"},
                    {title: "下拉选择器",id: "7"},
                    {title: "业务字段-人员",id: "8"},
                    {title: "默认",id: "9"}
                ],
                dateFormatList: [  //日期格式
                    {title: "年-月",id: "yyyy-MM"},
                    {title: "年-月-日",id: "yyyy-MM-dd"},
                    {title: "年-月-日 时：分",id: "yyyy-MM-dd HH:mm"},
                    {title: "年-月-日 时：分：秒",id: "yyyy-MM-dd HH:mm:ss"}
                ],
                mode: "add",
                titleMap: {
                    add: '添加自定义字段',
@@ -53,13 +200,49 @@
                isSaveing: false,
                //表单数据
                addFieldForm: {
                    test: ""
                    fieldName: "",
                    fieldDescription: "",
                    defaultValue: "",
                    maxlength: 20,
                    updateShow: false,
                    fieldType: "1",  //字段类型，默认输入框
                    formatName: "",
                    supportUpdate: "1",
                    saveDecimalNum: 0,
                    format: "0",
                    isShowPercentage: false,
                    rangeMin: 0,
                    rangeMax: 0,
                    type: "yyyy-MM",
                    dateType: "month",
                    dateFormat: "YYYY-MM",
                    val: {
                        label: "年-月",
                        value: "month",
                        format: "yyyy-MM"
                    },
                    radio: '1',
                    num: 0,
                    numLast: 9999,
                    test: "",
                    check: false,
                    code: "",
                    dictValue: "",
                    sort: "",
                    isSealed: false,
                    remark: "",
                    dictKey: "-1",
                    test: "",
                    viewShow: true,
                    numArea: 200,
                    dateType: "1",
                    radioList: [],
                    checkboxList: [],
                    selectList: []
                },
                //验证规则
                addFieldRules: {
                    code:[{required: true, message: '请输入字典编号'}],
                    dictValue:[{required: true, message: '请输入字典名称'}],
                    sort:[{required: true, message: '请输入字典排序'}]
                    fieldName:[{required: true, message: '请输入字段名称'}]
                }
            }
        },
@@ -67,8 +250,155 @@
            
        },
        methods: {
            deptIdChange() {

            dateChange(val) {
                console.log(val)
                this.addFieldForm.defaultValue = val;
            },
            typeDateChange(val) {
                this.addFieldForm.defaultValue = "";
                if(val == "yyyy-MM") {
                    this.addFieldForm.dateType = "month";
                    this.addFieldForm.dateFormat = "YYYY-MM";
                    this.addFieldForm.val = {
                        label: "年-月",
                        value: "month",
                        format: val
                    };
                }else if(val == "yyyy-MM-dd") {
                    this.addFieldForm.dateType = "date";
                    this.addFieldForm.dateFormat = "YYYY-MM-DD";
                    this.addFieldForm.val = {
                        label: "年-月-日",
                        value: "date",
                        format: val
                    };
                }else if(val == "yyyy-MM-dd HH:mm") {
                    this.addFieldForm.dateType = "datetime";
                    this.addFieldForm.dateFormat = "YYYY-MM-DD HH-mm";
                    this.addFieldForm.val = {
                        label: "年-月-日 时：分",
                        value: "datetime",
                        format: val
                    };
                }else if(val == "yyyy-MM-dd HH:mm:ss") {
                    this.addFieldForm.dateType = "datetime";
                    this.addFieldForm.dateFormat = "YYYY-MM-DD HH-mm-ss";
                    this.addFieldForm.val = {
                        label: "年-月-日 时：分：秒",
                        value: "datetime",
                        format: val
                    };
                }
            },
            saveSubmit() {
                var obj = {
                    businessType: 1,
                    fieldDescription: this.addFieldForm.fieldDescription,
                    fieldName: this.addFieldForm.fieldName,
                    fieldType: this.addFieldForm.fieldType,
                    supportUpdate: this.addFieldForm.supportUpdate,
                    systemField: 0,
                    updateShow: this.addFieldForm.updateShow?"1":"0",
                    viewShow: this.addFieldForm.viewShow?"1":"0",
                }
                if(this.addFieldForm.fieldType == "1") {  //字段类型
                    obj.defaultValue = this.addFieldForm.defaultValue;  //默认值
                    var propertyJson = {  //长度、格式
                        maxlength: this.addFieldForm.maxlength,
                        formatName: this.addFieldForm.formatName == "1"?"":this.addFieldForm.formatName
                    }
                    obj.propertyJson = JSON.stringify(propertyJson);
                }
                if(this.addFieldForm.fieldType == "2") {  //字段类型
                    obj.defaultValue = this.addFieldForm.defaultValue;  //默认值
                    var propertyJson = {
                        format: this.addFieldForm.format,
                        saveDecimalNum: this.addFieldForm.saveDecimalNum,
                        isShowPercentage: this.addFieldForm.isShowPercentage,
                        rangeMin: this.addFieldForm.rangeMin,
                        rangeMax: this.addFieldForm.rangeMax
                    }
                    obj.propertyJson = JSON.stringify(propertyJson);
                }
                if(this.addFieldForm.fieldType == "3") {  //字段类型
                    obj.defaultValue = this.addFieldForm.defaultValue;  //默认值
                    var propertyJson = {
                        maxlength: this.addFieldForm.maxlength
                    }
                    obj.propertyJson = JSON.stringify(propertyJson);
                }
                if(this.addFieldForm.fieldType == "4") {  //字段类型
                    obj.defaultValue = this.addFieldForm.defaultValue;  //默认值
                    var propertyJson = {
                        type: this.addFieldForm.type,
                        val: this.addFieldForm.val
                    }
                    obj.propertyJson = JSON.stringify(propertyJson);
                }
                console.log(obj);
                return;
                this.$HTTP.post(`/api/blade-system/custom-template-field/insert`,obj).then(res=> {
                    if(res.code == 200) {
                        this.$message.success("提交成功");
                    }else {
                        this.$message.error(res.msg);
                    }
                })
                console.log(obj)
            },
            removeRadio(index) {
                this.addFieldForm.radioList.splice(index,1);
            },
            addRadio() {
                var flag = false;
                if(this.addFieldForm.radioList.length > 0) {
                    this.addFieldForm.radioList.forEach(item=> {
                        if(item.input == "") {
                            flag = true;
                        }
                    })
                }
                if(flag) {
                    this.$message.error("请输入上一个自定义选项的内容");
                    return;
                }
                this.addFieldForm.radioList.push({radio: "",input: ""});
            },
            removeCheckbox(index) {
                this.addFieldForm.checkboxList.splice(index,1);
            },
            addCheckbox() {
                var flag = false;
                if(this.addFieldForm.checkboxList.length > 0) {
                    this.addFieldForm.checkboxList.forEach(item=> {
                        if(item.input == "") {
                            flag = true;
                        }
                    })
                }
                if(flag) {
                    this.$message.error("请输入上一个自定义选项的内容");
                    return;
                }
                this.addFieldForm.checkboxList.push({check: "",input: ""});
            },
            removeSelect(index) {
                this.addFieldForm.selectList.splice(index,1);
            },
            addSelect() {
                var flag = false;
                if(this.addFieldForm.selectList.length > 0) {
                    this.addFieldForm.selectList.forEach(item=> {
                        if(item.input == "") {
                            flag = true;
                        }
                    })
                }
                if(flag) {
                    this.$message.error("请输入上一个自定义选项的内容");
                    return;
                }
                this.addFieldForm.selectList.push({input: ""});
            },
            //显示
            open(mode='add'){
@@ -79,13 +409,6 @@
            //表单提交方法
            fieldSubmit(){
                var obj = Object.assign({},this.addFieldForm);
                if(obj.isSealed === true) {
                    obj.$isSealed = "是";
                    obj.isSealed = "1";
                }else {
                    obj.$isSealed = "否";
                    obj.isSealed = "0";
                }
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
@@ -115,5 +438,24 @@
</script>

<style scoped>

.add-btn {
    color: #409eff;
    cursor: pointer;
}
.specialItem /deep/ .el-form-item__content{
    flex-direction: column;
    align-items: flex-start;
}
.fieldContent {
    display: flex;
    align-items: flex-start;
    margin-bottom: 8px;
}
.remove-btn {
    min-width: 60px;
    display: inline-block;
    margin-left: 12px;
    color: red;
    cursor: pointer;
}
</style>

 src/views/configuration/custom/setField.vue

@@ -2,7 +2,7 @@
 * @Author: lzhe lzhe@example.com
 * @Date: 2024-03-26 10:28:33
 * @LastEditors: lzhe lzhe@example.com
 * @LastEditTime: 2024-05-13 11:39:54
 * @LastEditTime: 2024-05-28 16:40:59
 * @FilePath: /smart-web/src/views/master/person/main/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
@@ -19,7 +19,7 @@
                <el-table-column fixed="right" label="操作">
                    <template #default="scope">
                        <el-button type="text" size="small" @click="table_edit(scope.row, scope.$index)">编辑</el-button>
                        <el-button text type="primary" disabled size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                        <el-button text type="primary" :disabled="scope.row.systemFieldLabel == '是'?true: false" size="small" @click="table_del(scope.row, scope.$index)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
@@ -64,8 +64,13 @@
                    this.$refs.saveDialog.open('edit').setData(row)
                })
            },
            table_del() {

            table_del(row) {
                this.$HTTP.delete(`/api/blade-system/custom-template-field/remove`,[row.id]).then(res=> {
                    if(res.code == 200) {
                        this.$message.success("操作成功");
                        this.getTableData();
                    }
                })
            },
            getTableData() {
                this.$HTTP.get(`/api/blade-system/custom-template-field/list?businessType=${this.$route.query.type}`).then(res=> {