kd-aiot-frontend/src/components/addDoc/getCode.vue

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="500px"
    :visible.sync="showEditFlag"
    :close-on-click-modal="false"
    custom-class="ele-dialog-form"
    append-to-body
    @close="cancel"
    title="申请编码"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="82px">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="编码分类" prop="type">
            <ele-tree-select
              clearable
              :data="list"
              v-model="form.type"
              placeholder="请选择"
              default-expand-all
              labelKey="name"
              childrenKey="sonDirectoryList"
              valueKey="id"
              @change="typeChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="编码方案" prop="type1">
            <el-select
              v-model="form.type1"
              placeholder="请选择"
              style="width: 100%"
              @change="type1Change"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="编码预览" prop="code">
            <el-input v-model="form.code" disabled></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <headerTitle title="编码码段"></headerTitle>
          <template v-for="item in segmentList">
            <el-form-item :label="item.name" :prop="item.id" :key="item.id">
              <el-input
                v-if="item.roughRule == 5 || item.roughRule == 4"
                :disabled="true"
                v-model="item.currentValue"
              ></el-input>
              <el-select
                v-else
                v-model="item.currentValue"
                placeholder="请选择"
                style="width: 100%"
              >
                <el-option
                  v-for="(segmentValue, index) in item.value"
                  :key="index"
                  :label="segmentValue.value"
                  :value="segmentValue.value"
                  @click.native="
                    segmentValueChange(item.id, segmentValue.value, index)
                  "
                >
                </el-option>
              </el-select>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
    </el-form>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save"> 确认 </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import {
    selectTreeList,
    listParentId,
    pageSegment,
    getCode
  } from './api/index.js';
  import headerTitle from '@/components/header-title/index.vue';

  export default {
    data() {
      return {
        rules: {
          type: [{ required: true, message: '请选择', trigger: 'blur' }],
          type1: [{ required: true, message: '请选择', trigger: 'blur' }],
          code: [{ required: true, message: '请申请', trigger: 'blur' }]
        },
        list: [],
        options: [],
        segmentList: [],
        // 表单数据
        form: {
          type: '',
          code: '',
          type1: ''
        },
        nodeData: null,
        showEditFlag: false
      };
    },
    computed: {},
    components: {
      headerTitle
    },
    created() {},
    methods: {
      async open(nodeData) {
        this.list = await selectTreeList();
        this.nodeData = nodeData;
        this.setTree(this.list);
        this.showEditFlag = true;
      },
      setTree(data) {
        data.forEach((item) => {
          item.sonDirectoryList = item.sonDirectoryList.filter(
            (item) => item.type == 1
          );
          if (item.sonDirectoryList.length > 0) {
            this.setTree(item.sonDirectoryList);
          }
        });
      },

      async typeChange(val) {
        let data = await listParentId({
          pageNum: 1,
          size: 100,
          parentId: val,
          objId: this.nodeData?.id,
          objParentId: this.nodeData?.parentId
        });
        this.options = data.list.filter((item) => item.type == 2);
        this.form.type1 = '';
        this.form.code = '';
        this.segmentList = [];
      },
      async type1Change(val) {
        let codeData = await getCode({
          categoryId: val
        });
        this.form.code = codeData.codeStr;

        let data = await pageSegment({
          pageNum: 1,
          size: 100,
          businessCodeCategoryId: val
        });
        this.segmentList = data.list.map((item, index) => {
          item['currentValue'] = codeData.values[index];
          return item;
        });
      },
      async segmentValueChange() {
        // codeManageId:id,
        //   code:value,
        let codeData = await getCode({
          categoryId: this.form.type1,

          codeManageArray: this.segmentList.map((item) => {
            return {
              codeManageId: item.id,
              code: item.currentValue
            };
          }),
          isUpdateNo: 1
        });
        this.form.code = codeData.codeStr;
      },
      /* 保存编辑 */
      save() {
        this.$emit('setCode', this.form.code);
        this.cancel();
      },

      cancel() {
        this.form.type = '';
        this.form.code = '';
        this.form.type1 = '';
        this.showEditFlag = false;
        this.segmentList = [];
        this.options = [];
      }
    }
  };
</script>
<style scoped lang="scss">
  .aaa {
    width: 100%;

    ::v-deep .upload-demo {
      width: 100%;

      .el-upload--text {
        width: 100%;

        button {
          width: 100%;
          background: #ffffff;
          border: 1px solid #dbdbdb;
          border-radius: 5px;
        }
      }

      .el-upload-list {
        transform: translate(10px, -39px);
        position: absolute;
      }
    }
  }
</style>