kd-aiot-frontend/src/views/classifyManage/treeClassify/components/list-edit.vue

<!-- 字典项编辑弹窗 -->
<template>
  <ele-modal
    width="500px"
    :visible="visible"
    :close-on-click-modal="false"
    :title="isUpdate ? '编辑分类信息' : '新增分类信息'"
    @update:visible="updateVisible"
    :maxable="true"
  >
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="96px">
      <!-- 根节点 -->
      <template v-if="!rootId || (data && data.id == rootId)">
        <el-form-item label="类型编码:" prop="code">
          <el-input
            clearable
            :maxlength="20"
            :disabled="isUpdate"
            v-model="formData.code"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="类型名称:" prop="name">
          <el-input
            clearable
            :maxlength="20"
            v-model="formData.name"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="分类组:" prop="type">
          <el-select
            clearable
            multiple
            class="w100"
            :maxlength="20"
            v-model="type"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="排序:" prop="sortNum">
          <el-input
            clearable
            v-model.number="formData.sortNum"
            placeholder="请输入排序"
          />
        </el-form-item>

        <el-form-item label="编码规则:" prop="ruleCode">
          <el-input
            clearable
            v-model="formData.ruleCode"
            placeholder="请输入"
          />
        </el-form-item>

        <el-form-item label="描述:" prop="remark">
          <el-input
            clearable
            type="textarea"
            :maxlength="20"
            v-model="formData.remark"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="状态:" prop="isEnabled">
          <el-switch
                v-model="formData.isEnabled"
                   :active-text="formData.isEnabled==1?'启用':'停用'"
                   :active-value="1"
                   :inactive-value="0"
                >
            </el-switch>
        </el-form-item>
      </template>

      <!-- 子节点 -->
      <template v-else>
        <el-form-item label="父级节点:">
          {{ parentData.name }}
        </el-form-item>
        <el-form-item label="层级全览:">
          {{ fullName }}
        </el-form-item>
        <el-form-item label="节点编码:" prop="code">
          <el-input
            clearable
            :maxlength="20"
            :disabled="isUpdate"
            v-model="formData.code"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="节点名称:" prop="name">
          <el-input
            clearable
            :maxlength="20"
            v-model="formData.name"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="与下层分隔:" prop="separatorChar">
          <DictSelection
            dictName="分隔符"
            clearable
            v-model="formData.separatorChar"
          >
          </DictSelection>
        </el-form-item>

        <el-form-item label="本层排序:" prop="sortNum">
          <el-input
            clearable
            :maxlength="20"
            v-model.number="formData.sortNum"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="状态:" prop="isEnabled">
          <el-switch
                v-model="formData.isEnabled"
                   :active-text="formData.isEnabled==1?'启用':'停用'"
                   :active-value="1"
                   :inactive-value="0"
                >
            </el-switch>
        </el-form-item>
      </template>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">返回 </el-button>
      <el-button type="primary" :loading="loading" @click="save">
        确认
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import { saveOrUpdate } from '@/api/classifyManage';
  import dictMixins from '@/mixins/dictMixins';

  export default {
    props: {
      rootId: [String, Number],
      curNode: {
        type: Object,
        default: () => ({})
      }
    },
    mixins: [dictMixins],
    data() {
      const defaultForm = {
        name: '',
        code: '',
        ruleCode: '',
        separatorChar: '',
        sortNum: '',
        remark: '',
        parentId: 0,
        rootCategoryLevelId: null,
        isEnabled:1
      };
      return {
        visible: false,
        defaultForm,
        // 表单数据
        formData: { ...defaultForm },
        type: null,
        typeList: [
          {
            value: '1',
            label: '产品组'
          },

          {
            value: '2',
            label: '仓储组'
          },

          {
            value: '3',
            label: '物料组'
          },
          {
            value: '4',
            label: '资产组'
          },
          {
            value: '5',
            label: '物品组'
          }
        ],

        // 表单验证规则
        rules: {
          name: [
            {
              required: true,
              message: '请输入类型名称',
              trigger: 'blur'
            }
          ],
          code: [
            {
              required: true,
              message: '请输入类型编码',
              trigger: 'blur'
            }
          ]
        },
        // 提交状态
        loading: false,
        // 是否是修改
        isUpdate: false,
        data: null,
        parentData: {}
      };
    },
    computed: {
      fullName() {
        let str = '';
        let codeStr = '';
        let node = this.curNode;
        while (node?.data?.name) {
          str = node.data.name + '-' + str;
          codeStr = node.data.code + '-' + codeStr;
          node = node?.parent;
        }

        return (
          str.substring(str, str.length - 1) +
          `(${codeStr.substring(str, str.length - 1)})`
        );
      }
    },
    created() {},
    methods: {
      open(data, parentData) {
        this.formData.rootCategoryLevelId = this.$route.query.id;
        this.parentData = parentData;
        this.data = data;
        this.visible = true;
      },
      /* 保存编辑 */
      save() {
        this.$refs.formRef.validate((valid) => {
          if (!valid) {
            return false;
          }
          this.loading = true;

          const params = { ...this.formData };
          if (!this.data?.id && this.parentData?.id) {
            params.parentId =
              this.rootId == this.data?.id ? 0 : this.parentData.id;
          }
          if (this.data?.id) {
            params.id = this.data.id;
          }
          if (!this.rootId || (this.data && this.data.id == this.rootId)) {
            if (this.type) {
              params.type = this.type.join(',');
            }
            params.parentId = 0;
          }

          saveOrUpdate(params)
            .then((msg) => {
              this.loading = false;
              this.$message.success(msg);
              this.updateVisible(false);
              this.$emit('done', !!this.data);
            })
            .catch((e) => {
              this.loading = false;
              // this.$message.error(e.message);
            });
        });
      },
      /* 更新visible */
      updateVisible(value) {
        this.visible = value;
      }
    },
    watch: {
      visible(visible) {
        if (visible) {
          if (this.data) {
            this.$util.assignObject(this.formData, this.data);
            console.log(this.data);
            this.type = this.data.type.split(',');
            this.isUpdate = true;
          } else {
            this.isUpdate = false;
          }
        } else {
          this.$refs.formRef.clearValidate();
          this.formData = { ...this.defaultForm };
        }
      }
    }
  };
</script>