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

<!-- 用户编辑弹窗 -->
<template>
  <ele-modal
    width="1000px"
    :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="12">
          <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-col>
        <el-col :span="12">
          <ele-pro-table
            ref="table"
            :initLoad="false"
            :columns="[
              {
                prop: 'businessCode',
                label: '已申请编码',
                align: 'center'
              }
            ]"
            :datasource="datasource"
            height="300px"
            full-height="calc(100vh - 116px)"
            @cell-dblclick="handleDblclick"
            :page-size="10"
          ></ele-pro-table>
          <ele-pro-table
            ref="table1"
            :initLoad="false"
            :columns="[
              {
                prop: 'businessCode',
                label: '已使用编码',
                align: 'center'
              }
            ]"
            :datasource="datasource1"
            height="300px"
            full-height="calc(100vh - 116px)"
            :page-size="10"
          ></ele-pro-table>
        </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,
    businesscodeapplyPage
  } 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;
        });
        this.$nextTick(() => {
          this.$refs.table.reload({where:{}});
          this.$refs.table1.reload({where:{}});
        });
      },
      async segmentValueChange() {
        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;
             this.$nextTick(() => {
          this.$refs.table.reload({where:{}});
          this.$refs.table1.reload({where:{}});
        });
      },
      /* 表格数据源 */
      datasource({ page, limit, where }) {
        if (where.isCancle) {
          return [];
        }
        return businesscodeapplyPage({
          pageNum: page,
          size: limit,
          status: 0,
          buninessCategoryId: this.form.type1,
          ...where
        });
      },
      /* 表格数据源 */
      datasource1({ page, limit, where }) {
        console.log(where,'dsdsd')
        if (where.isCancle) {
          return [];
        }
        return businesscodeapplyPage({
          pageNum: page,
          buninessCategoryId: this.form.type1,
          size: limit,
          status: 1,
          ...where
        });
      },
      /* 保存编辑 */
      save() {
        this.$emit('setCode', this.form.code);
        this.cancel();
      },
      handleDblclick(row) {
        this.$emit('setCode', row.businessCode);
        this.cancel();
      },
      cancel() {
        this.form.type = '';
        this.form.code = '';
        this.form.type1 = '';
        this.showEditFlag = false;
        this.segmentList = [];
        this.options = [];
        this.$nextTick(() => {
          this.$refs.table.reload({ where: { isCancle: true } });
          this.$refs.table1.reload({ where: { isCancle: true } });
        });
      }
    }
  };
</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>