xiaoshi_system/src/views/project/patentCollection/components/dialog/PatentBatchIndex.vue

<template>
  <div>
    <el-dialog title="批量标引" :visible.sync="visible" width="500px" append-to-body destroy-on-close :before-close="close" :close-on-click-modal="false">
      <el-container class="patent-batch-index">
        <el-main class="patent-batch-index-main">
          <el-form>
            <el-form-item v-for="(item, index) in field" :key="index">
              <div slot="label">
                <span>{{ index + 1 }}. {{ item.name }}</span>
              </div>
              <el-switch class="patent-batch-index-field-enabled" v-model="item.enabled"
                @change="change(item)"></el-switch>
              <div v-if="item.enabled" class="patent-batch-index-field-content">
                <template v-if="item.type === 0 || item.type === 2">
                  <el-input type="textarea" v-model="item.text" @change="changeOption(item)" placeholder="请输入内容"
                    size="small"></el-input>
                </template>
                <template v-if="item.type === 1">
                  <el-date-picker v-model="item.text" @change="changeOption(item)" value-format="yyyy-MM-dd" type="date"
                    size="small" placeholder="选择日期" class="width_100"></el-date-picker>
                </template>
                <!-- <template v-if="item.type === 4">
                  <el-radio-group v-model="item.selected" @change="changeOption(item)">
                    <div v-for="option in item.option" :key="option.id">
                      <el-radio :label="option.id">{{ option.name }}</el-radio>
                    </div>
                  </el-radio-group>
                </template> -->
                <template v-if="item.type === 5 || item.type === 4">
                  <el-checkbox-group v-model="item.selected" @change="changeOption(item)">
                    <div v-for="option in item.option" :key="option.id">
                      <el-checkbox :label="option.id">{{ option.name }}</el-checkbox>
                    </div>
                  </el-checkbox-group>
                </template>
                <template v-if="item.type === 6">
                  <el-tree :ref="item.id" :data="item.option" node-key="id"
                    check-strictly default-expand-all :props="{ children: 'child', label: 'name' }">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <el-checkbox-group v-model="item.selected" @change="changeOption(item)">
                        <el-checkbox :label="data.id">{{ data.name }}</el-checkbox>
                      </el-checkbox-group>
                    </span>
                  </el-tree>
                </template>
                <template v-if="item.isCategory == 1">
                  <el-tree :ref="item.id" :data="item.option" node-key="id"
                    check-strictly default-expand-all :props="{ children: 'child', label: 'name' }">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                      <el-checkbox-group v-model="item.selected" @change="changeOption(item)">
                        <el-checkbox :label="data.id">{{ data.name }}</el-checkbox>
                      </el-checkbox-group>
                    </span>
                  </el-tree>
                </template>
              </div>
            </el-form-item>
          </el-form>
        </el-main>
      </el-container>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ['projectId'],
  data() {
    return {
      // 控制弹窗的显示
      visible: false,
      // 自定义及架构数据源
      field: [],
      // 选择的数据
      selectQuery: {},
      // 检索的数据
      searchQuery: '',
      // 自定义字段筛选的数据
      customFields: [],
      // 自定义字段选中或填写的值
      selectValue: [],
    }
  },
  mounted() {
  },
  methods: {
    // 
    changeOption(val) {
      // console.log(val);
      var obj = {
        projectId: this.projectId,
        fieldType: val.type,
        fieldId: val.id,
        optionType: 2,//操作类型 0取消 1增加 2覆盖
      }
      if ([0, 1, 2].includes(val.type)) {
        obj.fieldValue = val.text ? [val.text] : null
      } else {
        obj.fieldValue = val.selected
      }
      this.findSplice(val,obj)
    },
    findSplice(val,obj) {
      let a = this.selectValue.findIndex(item => {
        return item.fieldId == val.id
      })
      if (a != -1) {
        if (!obj.fieldValue || obj.fieldValue.length == 0) {
          this.selectValue.splice(a, 1)
        } else {
          this.selectValue.splice(a, 1, obj)
        }
      } else {
        this.selectValue.push(obj)
      }
    },
    // 开关，是否打开请求自定义字段以及架构的值
    change(val) {
      if (val.enabled) {
        if (val.isCategory == 1) {
          this.queryProductCategory(val)
        } else {
          this.queryCustomOption(val)
        }
      }
    },
    // 获取自定义字段
    async getList() {
      var params = {
        current: 1,
        size: 999,
        searchQuery: `projectId=${this.projectId}`,
        orderDTOList: [
          {
            "orderBy": "createTime",
            "orderType": 1
          }
        ],
      }
      await this.$api.queryCustomField(params).then(response => {
        this.field = response.data.data
      }).catch(error => {
      })
    },
    // 查询自定义栏位选项数据
    async queryCustomOption(row) {
      let params = {
        customFieldId: row.id,
      }
      await this.$api.queryCustomOption(params).then(response => {
        if (response.code == 200) {
          this.$set(row, 'option', response.data.data)
          this.$set(row, 'selected', [])
        }
      }).catch(error => {
        this.$set(row, 'option', [])
        this.$set(row, 'selected', [])
      })
    },
    //获取产品或产品类别架构以及技术分类
    queryProductCategory(item) {
      let params = {
        projectId: this.projectId,
        taskId: this.taskId || null,
        type: item.treeType,//类型：1产品类别，2产品，3技术分类，4自定义树
        typeId: item.fieldId,//产品或类别id
      }
      this.$api.queryTreeNodeTree(params).then(res => {
        if (res.code == 200) {
          this.$set(item, 'option', response.data.data)
          this.$set(item, 'selected', [])
        }
      }).catch(err => {
        this.$set(row, 'option', [])
        this.$set(row, 'selected', [])
      })
    },
    //获取专利信息,拿到产品或产品类别
    getPatent() {
      let params = {
        current: 1,//分页信息及区分同族类型
        size: 10,//分页信息及区分同族类型
        projectId: this.projectId,
        searchQuery: this.searchStr || '',//检索条件
        customFields: this.customFields || [],
        orderDTOList: [],//排序信息
      }
      this.$api.QueryPatent(params).then(res => {
        if (res.code == 200) {
          // treeType 3产品类别 2产品???
          if (res.data.data[0].trees.length > 0) {
            res.data.data[0].trees.forEach(item => {
              item.isCategory = 1
              this.field.push(item)
            })
          }
        }
      }).catch(error => {
      })
    },
    // 打开弹窗
    async open({ selectQuery, searchQuery, customFields }) {
      // console.log(selectQuery, searchQuery, customFields);
      this.selectQuery = selectQuery
      this.searchQuery = searchQuery
      this.customFields = customFields
      await this.getList()
      this.getPatent()
      this.visible = true
    },
    // 弹窗确定
    submit() {
      let params = {
        projectId: this.projectId,
        ...this.selectQuery,//选择的信息
        searchQuery: this.searchQuery,//检索的信息
        customFields: this.customFields,//自定义字段的信息
        esCustomFieldDTOS: this.selectValue,
      }
      this.$api.batchAddCustomField(params).then(res => {
        if (res.code == 200) {
          this.$message.success('标引成功')
          this.close()
        }
      })
    },
    // 弹窗关闭
    close() {
      this.visible = false
    },
  },
}
</script>

<style lang="scss" scoped></style>