eta_front/src/views/dataEntry_manage/thirdBase/components/batchAddToEdbDialog.vue

<template>
  <!-- 添加到指标库弹窗 -->
  <el-dialog
    :title="$t('Edb.Detail.batch_add_edb')"
    :visible.sync="isShow"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    @close="cancelHandle"
    width="1000px"
    top="5vh"
    v-dialogDrag
    center
  >
    <div class="add-dialog-wrap">
      <el-table :data="tableData" border height="500px">
        <el-table-column
          :label="$t('Edb.Detail.e_id')"
          align="center"
          prop="IndexCode"
        />
        <el-table-column
          :label="$t('Edb.Detail.e_name')"
          align="center"
          width="210px"
        >
          <template slot-scope="scope">
            <div class="name-cell">
              <el-input
                v-model="scope.row.IndexName"
                :placeholder="$t('Edb.InputHolderAll.input_name')"
                style="width: 100%; margin: 5px 0"
                :class="
                  existNameArr.includes(scope.row.IndexName) && 'error-ipt'
                "
              />
              <div
                class="error"
                v-if="existNameArr.includes(scope.row.IndexName)"
              >
                <span>{{ $t("BloombergPage.add_edb_check_hint2") }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('Edb.Detail.e_unit')"
          align="center"
          width="150px"
        >
          <template slot-scope="scope">
            <selectUnit v-model="scope.row.Unit" />
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('Edb.Detail.e_fre')"
          align="center"
          width="120px"
        >
          <template slot-scope="scope">
            <el-select
              v-model="scope.row.Frequency"
              :placeholder="$t('EtaBasePage.select_frequency')"
            >
              <el-option
                v-for="item in $parent.frequencyList"
                :key="item.val"
                :label="item.label"
                :value="item.val"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" width="320px">
          <template
            slot="header"
            slot-scope="scope"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <el-radio-group
              v-model="classifyType"
              @change="handleClassifyTypeChange"
              style="flex: 1; margin-right: 20px"
            >
              <el-radio :label="0" style="margin-right: 20px"
                ><!-- 分目录 -->{{
                  $t("EtaBasePage.subdirectory_radio")
                }}</el-radio
              >
              <el-radio :label="1"
                ><!-- 同目录 -->{{
                  $t("EtaBasePage.directory_radio")
                }}</el-radio
              >
            </el-radio-group>

            <el-cascader
              v-if="classifyType == 1"
              v-model="commonClassifyId"
              :options="classifyOpt"
              :props="levelProps"
              :placeholder="$t('Edb.InputHolderAll.input_menu')"
              :disabled="classifyType == 0"
              @change="handleClassifyChange()"
              style="width: 120px"
            />
          </template>
          <template slot-scope="{ row, $index }">
            <el-cascader
              v-model="row.ClassifyId"
              :options="classifyOpt"
              :props="levelProps"
              :placeholder="$t('Edb.InputHolderAll.input_menu')"
              :disabled="classifyType == 1"
              class="cascader-wrapper"
            />
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="text-align: center; margin: 30px 0">
      <el-button @click="cancelHandle">{{ $t("Dialog.cancel_btn") }}</el-button>
      <el-button type="primary" @click="handleCheckName" :loading="saveLoading">
        {{ $t("ManualEdbListPage.add_tobase_btn") }}
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { dataBaseInterface } from "@/api/api.js";
export default {
  props: {
    isShow: {
      type: Boolean,
    },
    list: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      tableData: [],
      saveLoading: false,

      classifyType: 0,
      classifyOpt: [],

      commonClassifyId: 0,

      levelProps: {
        label: "ClassifyName",
        value: "ClassifyId",
        children: "Children",
        checkStrictly: true,
        emitPath: false,
      },

      existNameArr: [],
    };
  },
  watch: {
    isShow(nval) {
      if (!nval) return;
      this.initDialog();

      this.getClassifyOpt();

      this.tableData = this.list.map((_) => ({
        ..._,
        ClassifyId: 0,
      }));
    },
  },
  methods: {
    initDialog() {
      this.classifyType = 0;
      this.commonClassifyId = 0;
      this.existNameArr = [];
    },

    filterNodes(arr) {
      arr.length &&
        arr.forEach((item) => {
          item.Children.length && this.filterNodes(item.Children);
          if (!item.Children.length) {
            delete item.Children;
          }
        });
    },
    // 获取指标分类
    async getClassifyOpt() {
      const res = await dataBaseInterface.menuListV3();
      if (res.Ret !== 200) return;
      this.filterNodes(res.Data.AllNodes || []);
      this.classifyOpt = res.Data.AllNodes || [];
    },

    cancelHandle() {
      this.existNameArr = [];
      this.$emit("update:isShow", false);
    },

    // 同目录修改
    handleClassifyChange() {
      if (this.classifyType === 1) {
        this.tableData.forEach((item) => {
          item.ClassifyId = this.commonClassifyId;
        });
      }
    },

    handleClassifyTypeChange() {
      if (this.classifyType == 0) {
        this.commonClassifyId = 0;
      }
    },

    handleCheckName() {
      //重名校验
      this.existNameArr = [];
      this.$emit("handleCheckName", this.tableData);
    },

    setValue(key, value) {
      //用来处理抛出事件的existNameArr 与  saveLoading
      this[key] = value;
    },
  },
};
</script>
<style lang="scss" scoped>
.add-dialog-wrap {
  .name-cell {
    position: relative;
    .error {
      position: absolute;
      bottom: -16px;
      color: #f00;
    }
  }
}
</style>
<style lang="scss">
.add-dialog-wrap {
  .error-ipt .el-input__inner {
    border-color: #f00;
  }
  .el-cascader .el-input {
    width: 100%;
  }
  .el-table .cell {
    overflow: visible;
  }
}
</style>