lzhe
2024-05-28 84ebff320cdf6844adf1202c3c856e225c38b730
src/views/configuration/custom/addField.vue
@@ -4,12 +4,12 @@
         <el-row>
            <el-col :span="24">
               <el-form-item label="字段名称" prop="code">
                  <el-input v-model="addFieldForm.code" placeholder="输入一个符合阅读习惯的简短名称,建议4个字符,最多不超过12字" clearable></el-input>
                  <el-input v-model="addFieldForm.test" placeholder="输入一个符合阅读习惯的简短名称,建议4个字符,最多不超过12字" clearable></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="提示文字" prop="dictValue">
                  <el-input v-model="addFieldForm.dictValue" placeholder="描述提示用户如何填写字段值(例如:请输入名字)" clearable></el-input>
               <el-form-item label="提示文字">
                  <el-input v-model="addFieldForm.test" placeholder="描述提示用户如何填写字段值(例如:请输入名字)" clearable></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="24">
@@ -19,131 +19,14 @@
                  </el-select>
               </el-form-item>
            </el-col>
            <!-- 变量1 输入框 -->
            <el-col :span="24">
               <el-form-item label="默认值">
                  <el-input v-model="addFieldForm.dictValue" placeholder="系统默认提供的值,可不填,设置默认值会替换提示文字" clearable></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="文字长度">
                  <el-date-picker v-model="addFieldForm.num" style="width: 100%" type="date" placeholder="请输入文字最长限制字数"></el-date-picker>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="输入格式">
                  <el-select v-model="addFieldForm.test" style="width: 100%" @change="deptIdChange" 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">
               <el-form-item label="默认值">
                  <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10" label="系统默认提供的值,可不填,设置默认值会替换提示文字"></el-input-number>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <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>
            <el-col :span="24">
               <el-form-item label="保留小数位">
                  <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10" label="最多不超过4位小数"></el-input-number>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="显示千分符">
                  <el-checkbox v-model="addFieldForm.check"></el-checkbox>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="限定值范围">
                  <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10"></el-input-number>
                  <span>-</span>
                  <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10"></el-input-number>
               </el-form-item>
            </el-col>
            <!-- 变量3 多行文本-->
            <el-col :span="24">
               <el-form-item label="默认值">
                  <el-input v-model="addFieldForm.test" placeholder="系统默认提供的值,可不填,设置默认值会替换提示文字" clearable></el-input>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="文字长度">
                  <el-input-number v-model="addFieldForm.num" @change="handleChange" :min="1" :max="10" label="请输入文字最长限制字数"></el-input-number>
               </el-form-item>
            </el-col>
            <!-- 变量4 日期选择器-->
            <el-col :span="24">
               <el-form-item label="默认值">
                  <el-date-picker v-model="addFieldForm.test" style="width: 100%" type="date" placeholder="系统默认提供的值,可不填,设置默认值会替换提示文字"></el-date-picker>
               </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 dateFormatList" :key="item.id" :label="item.title" :value="item.id"/>
                  </el-select>
               </el-form-item>
            </el-col>
            <!-- 变量5 单选按钮-->
            <el-col :span="24">
               <el-form-item label="选项">
                  <div>
                     <el-radio v-model="addFieldForm.radio" label="1"></el-radio>
                     <el-input v-model="addFieldForm.test" clearable></el-input>
                     <span class="remove-btn">删除</span>
                  </div>
                  <div class="add-btn">添加选项</div>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <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">
               <el-form-item label="选项">
                  <div>
                     <el-checkbox v-model="addFieldForm.check"></el-checkbox>
                     <el-input v-model="addFieldForm.test" clearable></el-input>
                     <span class="remove-btn">删除</span>
                  </div>
                  <div class="add-btn">添加选项</div>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <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">
               <el-form-item label="选项">
                  <div>
                     <el-input v-model="addFieldForm.test" clearable></el-input>
                     <span class="remove-btn">删除</span>
                  </div>
                  <div class="add-btn">添加选项</div>
               </el-form-item>
            </el-col>
            <!-- 变量8 业务字段-人员-->
            <!-- 没有 -->
            <el-col :span="24">
               <el-form-item label="编辑页显示">
                  <el-checkbox v-model="addFieldForm.check">显示</el-checkbox>
                  <el-checkbox v-model="addFieldForm.test" disabled></el-checkbox>
               </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-form-item label="查看页显示">
                  <el-checkbox v-model="addFieldForm.check">显示</el-checkbox>
                  <el-checkbox v-model="addFieldForm.test" disabled></el-checkbox>
               </el-form-item>
            </el-col>
         </el-row>
@@ -151,7 +34,6 @@
      <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="fieldSubmitAgain">保存并继续添加</el-button>
      </template>
   </el-dialog>
</template>
@@ -161,30 +43,6 @@
      emits: ['success', 'closed'],
      data() {
         return {
            inputTypeList: [  //输入格式
               {title: "无",id:1},
               {title: "手机号码",id:1},
               {title: "电话号码",id:1},
               {title: "邮箱",id:1}
            ],
            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:1},
               {title: "年-月-日",id:2},
               {title: "年-月-日 时:分",id:3},
               {title: "年-月-日 时:分:秒",id:4}
            ],
            deptIdList: [],
            mode: "add",
            titleMap: {
               add: '添加自定义字段',
@@ -195,17 +53,7 @@
            isSaveing: false,
            //表单数据
            addFieldForm: {
               radio: '1',
               num: 0,
               test: "",
               check: false,
               code: "",
               dictValue: "",
               sort: "",
               isSealed: false,
               remark: "",
               dictKey: "-1",
               $isSealed: "否"
               test: ""
            },
            //验证规则
            addFieldRules: {
@@ -256,33 +104,16 @@
               }
            })
         },
         fieldSubmitAgain() {
         },
         //表单注入数据
         setData(data){
            console.log(data)
            //可以和上面一样单个注入,也可以像下面一样直接合并进去
            if(data.isSealed == "1") {
               data.isSealed = true;
            }else {
               data.isSealed = false;
            }
            Object.assign(this.addFieldForm, data);
            //Object.assign(this.addFieldForm, data);
         }
      }
   }
</script>
<style scoped>
.remove-btn {
   margin-left: 10px;
    color: red;
    cursor: pointer;
}
.add-btn {
   margin-left: 30px;
    color: #3b8e8e;
   cursor: pointer;
}
</style>