搜索

gaoshp

2024-06-02 b46e6d2306515f94bf77c06e8d80ac76267e3ddb

 src/views/configuration/custom/addField.vue

@@ -3,30 +3,160 @@
      <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-option v-for="item in fieldTypeList" :key="item.id" :label="item.title" :value="item.id"/>
               <el-form-item label="字段类型">
                  <el-select v-model="addFieldForm.fieldType" style="width: 100%" placeholder="选择符合业务的字段类型">
                     <el-option v-for="item in fieldTypeList" :disabled="item.disabled" :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">
                  <el-radio-group v-model="addFieldForm.selectOption" class="specialRadio">
                     <el-radio :label="item.value" style="margin-right: 0px;" v-for="(item,index) in addFieldForm.radioList">
                        <el-input v-model="item.label" clearable></el-input>
                        <span class="remove-btn" @click="removeRadio(index)">删除</span>
                     </el-radio>
                  </el-radio-group>
                  <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.direction" label="0">横向排列</el-radio>
                  <el-radio v-model="addFieldForm.direction" label="1">纵向排列</el-radio>
               </el-form-item>
            </el-col>
            <!-- 变量6 多选按钮-->
            <el-col :span="24" v-if="addFieldForm.fieldType == '6'">
               <el-form-item label="选项" class="specialItem">
                  <el-checkbox-group v-model="addFieldForm.selectBoxOption" class="specialCheck">
                     <el-checkbox :label="item.value" :value="item.value" v-for="(item,index) in addFieldForm.checkboxList">
                        <el-input v-model="item.label" clearable></el-input>
                        <span class="remove-btn" @click="removeCheckbox(index)">删除</span>
                     </el-checkbox>
                  </el-checkbox-group>
                  <!-- <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.direction" label="0">横向排列</el-radio>
                  <el-radio v-model="addFieldForm.direction" label="1">纵向排列</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.label" 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 +164,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 +174,30 @@
      emits: ['success', 'closed'],
      data() {
         return {
            dialogData: {},
            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: "9"},
               {title: "默认",id: "10",disabled: true}
            ],
            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 +208,38 @@
            isSaveing: false,
            //表单数据
            addFieldForm: {
               test: ""
               fieldName: "",
               fieldDescription: "",
               defaultValue: "",
               maxlength: 20,
               updateShow: false,
               viewShow: true,
               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"
               },
               direction: "0",
               radioList: [],
               selectOption: "",
               selectBoxOption: [],
               checkboxList: [],
               selectList: []
            },
            //验证规则
            addFieldRules: {
               code:[{required: true, message: '请输入字典编号'}],
               dictValue:[{required: true, message: '请输入字典名称'}],
               sort:[{required: true, message: '请输入字典排序'}]
               fieldName:[{required: true, message: '请输入字段名称'}]
            }
         }
      },
@@ -67,8 +247,191 @@
         
      },
      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
               };
            }
         },
         fieldSubmit() {  //保存
            this.saveSubmit('closeDialog');
         },
         saveSubmit(isClose) {  //保存并继续
            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);
            }
            if(this.addFieldForm.fieldType == "5") {  //单选按钮
               var propertyJson = {
                  selectOption: this.addFieldForm.selectOption,
                  options: this.addFieldForm.radioList,
                  direction: this.addFieldForm.direction
               }
               obj.propertyJson = JSON.stringify(propertyJson);
            }
            if(this.addFieldForm.fieldType == "6") {  //多选按钮
               var propertyJson = {
                  selectOption: this.addFieldForm.selectBoxOption,
                  options: this.addFieldForm.checkboxList,
                  direction: this.addFieldForm.direction
               }
               obj.propertyJson = JSON.stringify(propertyJson);
            }
            if(this.addFieldForm.fieldType == "7") {  //下拉选择器
               var propertyJson = {
                  options: this.addFieldForm.selectList
               }
               obj.propertyJson = JSON.stringify(propertyJson);
            }
            obj.businessType = this.$route.query.type;
            var that = this;
            if(this.mode == "edit") {
               var url = "/api/blade-system/custom-template-field/update";
               var method = "put";
               obj.id  = this.dialogData.id;
            }else {
               var url = "/api/blade-system/custom-template-field/insert";
               var method = "post";
            }
            this.$HTTP[method](url,obj).then(res=> {
               if(res.code == 200) {
                  that.$message.success("提交成功");
                  that.$emit("success",obj);
                  if(isClose == "closeDialog") {
                     that.visible = false;
                  }
               }else {
                  that.$message.error(res.msg);
               }
            })
         },
         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.label == "") {
                     flag = true;
                  }
               })
            }
            if(flag) {
               this.$message.error("请输入上一个自定义选项的内容");
               return;
            }
            this.addFieldForm.radioList.push({label: "",value: "radiosSelect" + (this.addFieldForm.radioList.length + 1),parentId: 0});
         },
         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.label == "") {
                     flag = true;
                  }
               })
            }
            if(flag) {
               this.$message.error("请输入上一个自定义选项的内容");
               return;
            }
            this.addFieldForm.checkboxList.push({label: "",value: "checkboxSelect" + (this.addFieldForm.checkboxList.length + 1),parentId: 0});
         },
         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.label == "") {
                     flag = true;
                  }
               })
            }
            if(flag) {
               this.$message.error("请输入上一个自定义选项的内容");
               return;
            }
            this.addFieldForm.selectList.push({label: "",value: "select" + (this.addFieldForm.selectList.length + 1),parentId: 0});
         },
         //显示
         open(mode='add'){
@@ -76,44 +439,68 @@
            this.visible = true;
            return this
         },
         //表单提交方法
         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;
                  this.$HTTP.post("/api/blade-system/dict/submit",obj).then(res=> {
                     this.isSaveing = false;
                     if(res.code == 200) {
                        this.$emit('success', this.addFieldForm, this.mode);
                        this.visible = false;
                        this.$message.success("操作成功");
                     }else {
                        this.$alert(res.message, "提示", {type: 'error'});
                     }
                  })
               }else{
                  return false;
               }
            })
         },
         //表单注入数据
         setData(data){
            console.log(data)
            //可以和上面一样单个注入，也可以像下面一样直接合并进去
            //Object.assign(this.addFieldForm, data);
            this.dialogData = data;
            this.$HTTP.get(`/api/blade-system/custom-template-field/get/${data.id}`).then(res=> {
               if(res.code == 200) {
                  res.data.fieldType = String(res.data.fieldType);
                  res.data.format = res.data.format == "0"?"0":"1";
                  res.data.direction = String(res.data.direction);
                  res.data.updateShow = res.data.updateShow == "1"?true:false;
                  res.data.viewShow = res.data.viewShow == "1"?true:false;
                  res.data.supportUpdate = String(res.data.supportUpdate);
                  if(res.data.fieldType != "10") {
                     this.addFieldForm = Object.assign(res.data,JSON.parse(res.data.propertyJson));
                  }else {
                     this.addFieldForm = res.data;
                  }
                  this.addFieldForm.format = String(this.addFieldForm.format);
                  if(res.data.fieldType == "5") {
                     this.addFieldForm.radioList = this.addFieldForm.options;
                  }
                  if(res.data.fieldType == "6") {
                     this.addFieldForm.checkboxList = this.addFieldForm.options;
                     this.addFieldForm.selectBoxOption = this.addFieldForm.selectOption;
                  }
                  if(res.data.fieldType == "7") {
                     this.addFieldForm.selectList = this.addFieldForm.options;
                  }
               }
            })
         }
      }
   }
</script>

<style scoped>

.add-btn {
   color: #409eff;
   cursor: pointer;
}
.specialItem /deep/ .el-form-item__content{
   display: flex;
   flex-direction: column;
    align-items: flex-start;
}
.specialRadio,.specialCheck {
   display: flex;
   flex-direction: column;
    align-items: flex-start;
}
.specialRadio label,.specialCheck label{
   margin-bottom: 8px;
}
.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>