解决pc-服务指令-修改分类标签图标 分类标签不回显问题

src/views/services/instructiontag/components/InstructionTagForm.vue

@@ -15,7 +15,8 @@
             <a-col :span="24">
               <a-form-item label="分类标签" v-bind="validateInfos.instructionType"
                 id="ConfigServiceCategoryForm-instructionType" name="instructionType">
-                <j-dict-select-tag type='list' v-model:value="formData.instructionType"
+                <span v-if="izEditIcon">{{ formData.title }}</span>
+                <j-dict-select-tag v-else type='list' v-model:value="formData.instructionType"
                   :dictCode="`view_directive_can_use_instruction_tag,item_text,item_value`" placeholder="请选择分类标签"
                   allowClear @currentText="selectedFunc" />
               </a-form-item>
@@ -30,7 +31,7 @@
                 <IconPicker v-model:value="formData.icon" />
               </a-form-item>
             </a-col>
-            <a-col :span="24">
+            <a-col :span="24" :hidden="izEditIcon">
               <a-form-item label="是否启用" v-bind="validateInfos.izEnabled" id="ConfigServiceCategoryForm-izEnabled"
                 name="izEnabled">
                 <j-dict-select-tag type='radio' v-model:value="formData.izEnabled" dictCode="iz_enabled"
@@ -64,8 +65,10 @@ const formRef = ref();
 const useForm = Form.useForm;
 const emit = defineEmits(['register', 'ok', 'refresh']);
 const titleDisabled = ref<boolean>(false);
+const izEditIcon = ref(false)
 const formData = reactive<Record<string, any>>({
   id: '',
+  title: '',
   instructionName: '',
   instructionType: '',
   sort: 99,
@@ -77,12 +80,13 @@ const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
 const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
 const confirmLoading = ref<boolean>(false);
 //表单验证
-const validatorRules = reactive({
-  // instructionName: [{ required: true, message: '请输入分类标签名称!' },],
-  instructionType: [{ required: true, message: '请选择分类标签类型!' },],
-  sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入正整数!' },],
-  icon: [{ required: true, message: '请选择图标!' }],
-  izEnabled: [{ required: true, message: '请选择是否启用!' },],
+const validatorRules = computed(() => {
+  return {
+    instructionType: izEditIcon.value ? [] : [{ required: true, message: '请选择分类标签类型!' }],
+    sort: [{ required: true, message: '请输入排序!' }, { pattern: /^\d+$/, message: '请输入正整数!' },],
+    icon: [{ required: true, message: '请选择图标!' }],
+    izEnabled: [{ required: true, message: '请选择是否启用!' },],
+  };
 });
 const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: false });
 
@@ -103,6 +107,7 @@ const disabled = computed(() => {
  * 新增
  */
 function add() {
+  izEditIcon.value = false
   edit({});
 }
 
@@ -110,7 +115,32 @@ function add() {
  * 编辑
  */
 function edit(record) {
-  console.log("🚀 ~ edit ~ record:", record)
+  izEditIcon.value = false
+  nextTick(() => {
+    resetFields();
+    const tmpData = {};
+    Object.keys(formData).forEach((key) => {
+      if (record.hasOwnProperty(key)) {
+        tmpData[key] = record[key]
+      }
+    })
+    //赋值
+    Object.assign(formData, tmpData);
+    formData.instructionName = record.title;
+    formData.id = record.key;
+    if (record.title) {
+      titleDisabled.value = true;
+    } else {
+      titleDisabled.value = false;
+    }
+  });
+}
+
+/**
+ * 编辑
+ */
+function editIcon(record) {
+  izEditIcon.value = true
   nextTick(() => {
     resetFields();
     const tmpData = {};
@@ -165,6 +195,12 @@ async function submitForm() {
       }
     }
   }
+  if (izEditIcon.value) {
+    model = {
+      id: model.id,
+      icon: model.icon
+    }
+  }
   await saveOrUpdate(model, isUpdate.value)
     .then((res) => {
       if (res.success) {
@@ -191,6 +227,7 @@ defineExpose({
   add,
   edit,
   submitForm,
+  editIcon,
 });
 </script>
 

src/views/services/instructiontag/components/InstructionTagModal.vue

@@ -56,6 +56,18 @@ function edit(record) {
   });
 }
 
+/**
+ * 修改图标
+ * @param record
+ */
+function editIcon(record) {
+  title.value = disableSubmit.value ? '详情' : '编辑';
+  visible.value = true;
+  nextTick(() => {
+    registerForm.value.editIcon(record);
+  });
+}
+
 /**
  * 确定按钮点击事件
  */
@@ -101,6 +113,7 @@ defineExpose({
   edit,
   disableSubmit,
   usingOrStop,
+  editIcon,
 });
 </script>
 

src/views/services/serviceDirective/ConfigServiceDirectiveList.vue

@@ -1110,7 +1110,7 @@ function stopInstruction(data) {
 }
 function editInstruction(data) {
   insRegisterModal.value.disableSubmit = false;
-  insRegisterModal.value.edit(data);
+  insRegisterModal.value.editIcon(data);
 }
 //新增服务类别
 function addCategory(data) {