批次链接

<template>
  <a-modal
    v-model="showModal"
    :title="titleName"
    @ok="handleOk"
    okText="确定"
    cancelText="取消"
    :confirm-loading="submitDisabled"
  >
    <a-form-model
      :model="info"
      :rules="rules"
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      ref="protocolParamsModalRef"
    >
      <a-form-model-item prop="parameterName" label="参数名称">
        <a-input v-model="info.parameterName" placeholder="请输入参数名称" />
      </a-form-model-item>
      <a-form-model-item prop="parameterType" label="参数类型">
        <a-select
          v-model="info.parameterType"
          placeholder="请选择参数类型"
          @change="selectType"
        >
          <a-select-option
            :key="index"
            :value="item.value"
            v-for="(item, index) in protocolParamsTypeColumn"
            ><a-tag :color="item.color">{{ item.label }}</a-tag>
          </a-select-option>
          <!-- <a-select-option :key="index" v-for="(item, index) in paramsInfo.type"
            ><a-tag :color="paramsInfo.color[index]">{{ item }}</a-tag>
          </a-select-option> -->
        </a-select>
      </a-form-model-item>
      <div class="params-setting">
        <div class="params-setting-select">
          <a-select
            v-model="info.valueRequired"
            style="width: 90px; font-size: 12px"
          >
            <a-select-option :value="1"> 必填 </a-select-option>
            <a-select-option :value="2"> 非必填 </a-select-option>
          </a-select>
          <a-divider type="vertical" />
        </div>
        <div class="params-setting-select">
          <a-select
            style="width: 90px; font-size: 12px"
            @change="selectIsMultiple"
            :disabled="defaultMultipleOrNoMultiple"
            v-model="info.multiValueRequired"
          >
            <a-select-option :value="1"> 多值 </a-select-option>
            <a-select-option :value="2"> 无多值 </a-select-option>
          </a-select>
          <a-divider type="vertical" />
        </div>
        <div class="params-setting-select">
          <a-select
            default-value="noGroup"
            style="width: 90px; font-size: 12px"
            v-model="info.parameterGroupId"
          >
            <a-select-option
              :key="item.id"
              :value="item.id"
              v-for="item in protocolParamsGroupList"
              >{{ item.groupName }}</a-select-option
            >
          </a-select>
        </div>
      </div>
      <component
        ref="selectParamsInputRef"
        @saveParamsValue="saveParamsValue"
        :isNew="isNew"
        :editProtocolParamsInfo="editProtocolParamsInfo"
        :defaultValues.sync="defaultValues"
        :defaultInputFence.sync="defaultInputFence"
        :triggerSubmit.sync="isSubmit"
        :is="componentName"
        :isMultiple="info.multiValueRequired"
      ></component>
    </a-form-model>
  </a-modal>
</template>
<script>
import { protocolParamsTypeColumn, paramTypeColumn } from '@/common/global'
import { ProtocolParamsGroupEnum } from '../comm/ProtocolParamsGroupEnum'
import {
  saveProtocolParams,
  updateProtocolParams,
  judgeSaveAS,
  saveAsProtocol
} from '@/api/templateManagement'
import ProtocolParamsText from './ProtocolParamsText'
import ProtocolParamsTextArea from './ProtocolParamsTextArea'
import ProtocolParamsSelect from './ProtocolParamsSelect'
import ProtocolParamsMultiSelect from './ProtocolParamsMultiSelect'
import ProtocolParamsInteger from './ProtocolParamsInteger'
import ProtocolParamsFloat from './ProtocolParamsFloat'
import ProtocolParamsTime from './ProtocolParamsTime'
import ProtocolParamsProductLink from './ProtocolParamsProductLink'
import ProtocolParamsEntityLink from './ProtocolParamsEntityLink'
import ProtocolParamsFrame from './ProtocolParamsFrame'
import ProtocolParamsProjectRange from './ProtocolParamsProjectRange'
import ProtocolParamsBatchLink from './ProtocolParamsBatchLink.vue'
export default {
  components: {
    ProtocolParamsText,
    ProtocolParamsTextArea,
    ProtocolParamsSelect,
    ProtocolParamsMultiSelect,
    ProtocolParamsInteger,
    ProtocolParamsFloat,
    ProtocolParamsTime,
    ProtocolParamsProductLink,
    ProtocolParamsEntityLink,
    ProtocolParamsFrame,
    ProtocolParamsProjectRange,
    ProtocolParamsBatchLink
  },
  props: {
    isShowModal: {
      type: Boolean,
      default() {
        return false
      }
    },
    protocolId: {
      type: String,
      required: true
    },
    // protocol的version
    version: Number,
    labNoteId: String,
    steps: {
      type: Array,
      required: true
    },
    editProtocolParamsInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    isNew: {
      type: Number, // 1.新建 2.编辑 默认新建
      default() {
        return 1
      }
    },
    dataSource: {
      type: String,
      default() {
        return 'model'
      }
    }
  },
  data() {
    return {
      // 设置选择的参数类型
      protocolParamsTypeColumn,
      showModal: this.isShowModal,
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      componentNameObj: {
        [paramTypeColumn.text]: 'protocolParamsText',
        [paramTypeColumn.textArea]: 'protocolParamsTextArea',
        [paramTypeColumn.radioSelect]: 'protocolParamsSelect',
        [paramTypeColumn.multiSelect]: 'protocolParamsMultiSelect',
        [paramTypeColumn.integer]: 'protocolParamsInteger',
        [paramTypeColumn.float]: 'protocolParamsFloat',
        [paramTypeColumn.time]: 'protocolParamsTime',
        [paramTypeColumn.link]: 'protocolParamsProductLink',
        [paramTypeColumn.entity]: 'ProtocolParamsEntityLink',
        [paramTypeColumn.frame]: 'ProtocolParamsFrame',
        [paramTypeColumn.task_note]: 'ProtocolParamsProjectRange',
        [paramTypeColumn.batchLink]: 'ProtocolParamsBatchLink',
      },
      componentName: 'protocolParamsText',
      // 1表示多值 2表示无多值
      multiValueRequired: 2,
      // 1表示必填 2表示非必填
      valueRequired: 2,
      isSubmit: false,
      defaultMultipleOrNoMultiple: false,
      info: {
        protocolId: this.protocolId,
        parameterName: '',
        parameterType: paramTypeColumn.text,
        valueRequired: 2,
        multiValueRequired: 2,
        parameterGroupId: ProtocolParamsGroupEnum.NOT_GROUP,
        values: [],
        // parameter的version
        version: this.version
      },
      rules: {
        parameterName: {
          min: 1,
          max: 128,
          required: true,
          message: '参数名称长度在1-128个字符之间'
        },
        parameterType: { required: true, message: '请选择参数类型' }
      },
      defaultValues: [],
      defaultInputFence: [],
      titleName: '新建参数',
      submitDisabled: false
    }
  },
  computed: {
    protocolParamsGroupList() {
      return this.$store.state.protocolParamsGroup.protocolParamsGroupList
    }
  },
  watch: {
    isShowModal(newVal) {
      this.showModal = this.isShowModal
    },
    showModal(newVal) {
      if (newVal === false) {
        this.closeModal()
      } else {
        this.$refs.selectParamsInputRef &&
          this.$refs.selectParamsInputRef.resetParamsValues()
      }
    },
    editProtocolParamsInfo: {
      handler(newVal) {
        if (Object.keys(newVal).length > 0) {
          this.selectType(newVal.parameterType)
          this.defaultValues = _.cloneDeep(newVal.values)
          this.defaultInputFence = _.cloneDeep(newVal.inputFence || [])
          this.info = Object.assign(this.info, newVal)
          this.selectGroup(newVal.groupId)
        }
      },
      immediate: true
    },
    isNew: {
      handler(newVal) {
        if (newVal === 1) {
          this.info.parameterName = ''
          this.titleName = '新建参数'
        } else {
          this.titleName = '编辑参数'
        }
      },
      immediate: true
    }
  },
  methods: {
    /**
     * 模态框确定按钮事件
     */
    async handleOk() {
      // s为 1 来源为模板，s为 2 来源为试验记录
      let s = 1
      if (this.dataSource === 'labNote') {
        s = 2
      }
      this.submitDisabled = true
      // 判断是否需要另存
      const resJudgeInfo = await judgeSaveAS({
        protocolId: this.protocolId,
        s
      }).finally(() => {
        this.submitDisabled = false
      })
      if (resJudgeInfo.data.saveAs === 1) {
        // 需要另存 如果是实验记录中直接另存 模板中给出提示
        if (this.dataSource === 'labNote') {
          await this.saveAsProtocol({
            referenceId: this.protocolId,
            protocolType: resJudgeInfo.data.protocolType,
            labNoteId: this.labNoteId
          })
          this.updateProtocolMade()
        } else {
          // 在模板中 被实验记录引用 给出提示
          let _this = this
          this.$confirm({
            title: '提示',
            content: 'protocol已经在实验中使用，只支持另存',
            okText: '确定',
            okType: 'warning',
            cancelText: '取消',
            onOk() {
              _this.$parent.visible = true
            },
            onCancel() {}
          })
        }
      } else if (
        resJudgeInfo.data.referenceType === 1 &&
        this.dataSource === 'model'
      ) {
        let _this = this
        this.$confirm({
          title: '提示',
          content: 'protocol已经被模板使用，保存会使相关模板更新',
          okText: '确定',
          okType: 'warning',
          cancelText: '取消',
          onOk() {
            _this.info.parameterName = _this.info.parameterName.trim()
            _this.$refs.protocolParamsModalRef.validate(valid => {
              if (valid) {
                _this.isSubmit = true
              }
            })
          },
          onCancel() {}
        })
      } else {
        this.info.parameterName = this.info.parameterName.trim()
        this.$refs.protocolParamsModalRef.validate(valid => {
          if (valid) {
            this.isSubmit = true
          }
        })
      }
    },
    /**
     * 更新机制 调用方法
     */
    updateProtocolMade() {
      this.info.parameterName = this.info.parameterName.trim()
      this.$refs.protocolParamsModalRef.validate(valid => {
        if (valid) {
          this.isSubmit = true
        }
      })
    },
    /**
     * 另存protocol
     */
    async saveAsProtocol(info) {
      const res = await saveAsProtocol(info)
      if (res.code === '200') {
        // this.$emit('update:protocolId', res.data.id)
        this.$listeners.updateProtocolId(res.data.id)
        this.$store.commit('SET_CURRRENT_PROTOCOL_SAVE_AS_ID', res.data.id)
      }
    },
    closeModal() {
      this.$refs.protocolParamsModalRef.clearValidate()
      this.$refs.selectParamsInputRef.resetParamsValues()
      this.$emit('closeModal')
    },
    selectType(value) {
      // 选择参数类型时 默认值清空
      this.defaultValues = []
      this.defaultInputFence = []
      // 选择渲染的组件
      this.componentName = this.componentNameObj[value] || this.componentName
      this.defaultMultipleOrNoMultiple = false
      if (
        value === paramTypeColumn.multiSelect ||
        value === paramTypeColumn.link ||
        value === paramTypeColumn.entity ||
        value === paramTypeColumn.task_note ||
        value === paramTypeColumn.batchLink
      ) {
        // 多值
        this.selectIsMultiple(1)
      } else {
        this.selectIsMultiple(2)
      }
      if (
        value === paramTypeColumn.textArea ||
        value === paramTypeColumn.radioSelect ||
        value === paramTypeColumn.time ||
        value === paramTypeColumn.multiSelect ||
        value === paramTypeColumn.link ||
        value === paramTypeColumn.entity ||
        value === paramTypeColumn.task_note ||
        value === paramTypeColumn.batchLink
      ) {
        this.defaultMultipleOrNoMultiple = true
      } else {
        this.defaultMultipleOrNoMultiple = false
      }
    },
    /**
     * 选择分组
     */
    selectGroup(parameterGroupId) {
      this.info.parameterGroupId =
        parameterGroupId || ProtocolParamsGroupEnum.NOT_GROUP
    },
    selectIsMultiple(value) {
      this.info.multiValueRequired = value
    },
    saveParamsValue(value, options) {
      this.isSubmit = false
      if (this.info.parameterType === paramTypeColumn.task_note) {
        this.info.inputFence = value.map(item => {
          return {
            referenceType: 40,
            referenceId: item
          }
        })
      } else {
        if (_.isObject(value) && !_.isArray(value)) {
          console.log(value)
          this.info.values = _.cloneDeep(value?.values)
          this.info.inputFence = _.cloneDeep(value?.inputFence)
        } else {
          this.info.values = _.cloneDeep(value)
        }
      }
      switch (this.info.parameterType) {
        case paramTypeColumn.radioSelect:
        case paramTypeColumn.multiSelect:
          this.info.options = options
          break
        case paramTypeColumn.float:
          this.info.displayType = options
          break
        case paramTypeColumn.time:
          this.info.timeFormat = options
          break
      }
      this.info.protocolStepId =
        this.steps[0].stepId || this.steps[0].protocolStepId
      this.info.labNoteId = this.labNoteId
      this.info.protocolId = this.protocolId
      this.createOrUpdateProtocolParams(this.info)
      this.isSubmit = true
      this.showModal = false
    },
    async createOrUpdateProtocolParams(data) {
      let res = null,
        isEdit = false
      if (this.isNew === 1) {
        res = await saveProtocolParams(data)
      } else {
        res = await updateProtocolParams(data)
        isEdit = true
      }
      if (res.code === '200') {
        this.info.parameterName = ''
        // 更新version
        this.info.version = res.data.version
        this.$emit('createOrUpdateParams')
        isEdit &&
          this.$emit('update:isNew', 1) &&
          this.$emit('update:editProtocolParamsInfo', {})
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.params-setting {
  display: flex;
  .params-setting-select {
    flex: 1;
  }
  // ::v-deep .ant-select {
  //   flex: 1;
  // }
  ::v-deep .ant-select-selection {
    border: none;
    box-shadow: none;
  }
}
// ::v-deep .ant-modal-content {
//   max-height: 800px;
// }
</style>

<template>
  <div class="protocol-params-batch-link">
    <a-button @click="SelectBatch">
      <a-icon type="fullscreen" />选择批次
    </a-button>
    <div :key="item.referenceId" v-for="item in paramValues">
      <span>{{ item.referenceName }}</span>
    </div>
    <!-- TODO -->
    <span v-show="false">
      {{paramValues}}
    </span>
    <LimitFrame v-bind.sync="$attrs" ref="limitFrameRef" />
    <batch-link-params-modal ref="batchLinkParamsModalRef" :paramValues.sync="paramValues"></batch-link-params-modal>
  </div>
</template>
<script>
import BatchLinkParamsModal from '../comm/BatchLinkParamsModal'
import LimitFrame from './LimitFrame'
export default {
  components: {
    BatchLinkParamsModal,
    LimitFrame
  },
  props: {
    triggerSubmit: {
      type: Boolean,
      default() {
        return false
      }
    },
    defaultValues: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      paramValues: []
    }
  },
  methods: {
    SelectBatch() {
      this.$refs.batchLinkParamsModalRef.openSelectBatchInfoModal()
    },
    /**
     * 重置参数
     */
    resetParamsValues() {
      this.paramValues = []
    },
  },
  watch: {
    triggerSubmit: {
      handler(newVal) {
        if (newVal === true) {
          this.$emit('saveParamsValue', { values: this.paramValues, inputFence: this.$refs.limitFrameRef?.getSelectedFrame() })
          this.$emit("update:triggerSubmit", false)
        }
      }
    },
    defaultValues: {
      handler(newVal) {
        if (newVal && newVal.length > 0) {
          this.paramValues = _.cloneDeep(newVal)
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

<template>
  <a-modal
    title="选择批次"
    v-if="visible"
    :centered="true"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="'80%'"
    :destoryOnClose="true"
    :bodyStyle="{ padding: '10px 10px', height: '800px', overflowY: 'scroll' }"
  >
    <bmy-table
      ref="bmyTableRef"
      :loading="listLoading"
      :columns="showColumns"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :searchContentObj="searchContent"
      :selectContentObj="selectContent"
      :data-source="data"
      :pagination="pagination"
      rowKey="id"
      :isSelectContent="false"
      :isSearch="true"
      :scroll="{ x: '100%', y: '100%' }"
    >
    </bmy-table>
  </a-modal>
</template>
<script>
import { getFullProductBatchListExt } from '@/api/materialCenter'
const columns = [
  {
    title: '批次编号',
    dataIndex: 'batchName',
    searchType: 'string',
    width: '200px',
    defaultSearch: true,
    innerSearch: true
  },
  {
    title: '产品名称',
    dataIndex: 'productName',
    searchType: 'string'
  },
  {
    title: '框架名称',
    dataIndex: 'categoryName'
  },
  {
    title: '创建人',
    dataIndex: 'createMan'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  }
]
export default {
  props: {
    paramValues: Array,
    filterSearch: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      // BatchName: '',
      isSelected: false,
      visible: false,
      isLoading: false,
      BatchLinkValues: [],
      selectedArr: [],
      data: [],
      tmpSelectRecords: [],
      showColumns: columns,
      listLoading: false,
      selectedRowKeys: [], // 选择的条目index
      selectedRows: [],
      choose: null,
      listQuery: Object.assign(
        { pageIndex: 1, pageSize: 10 },
        this.filterSearch
      ),
      pagination: {
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: total => `总共有 ${total} 项`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.pageSize = pageSize
          this.pageNo = 1
          this.listQuery = {
            pageIndex: 1,
            pageSize: pageSize
          }
          this.current = 1
          this.getList()
          this.choose = null
        }, // 改变每页数量时更新显示
        onChange: (page, pageSize) => this.changePage(page, pageSize), //点击页码事件
        total: 0 //总条数
      },
      searchContent: {
        searchBody: columns,
        handleToolSearch: (value, complexSearch) => {
          complexSearch = complexSearch || false
          console.log(value)
          Object.assign(this.listQuery, value)
          let tmp = {
            pageIndex: 1,
            pageSize: this.listQuery.pageSize
          }
          Object.assign(tmp, value, { filterSearch: complexSearch })
          this.listQuery = tmp
          this.getList()
        }
      },
      selectContent: {
        selectOutData: columns,
        getSelectData: value => {
          this.showColumns = value
        }
      }
    }
  },
  methods: {
    /**
     * 重置选择框内容
     */
    resetSelectedContent() {
      this.selectedRows = []
      this.selectedRowKeys = []
    },
    /**
     * 取消操作
     */
    handleCancel() {
      this.visible = false
    },
    /**
     * 打开模态框
     */
    openSelectBatchInfoModal() {
      this.visible = true
      this.$nextTick(() => {
        this.getList()
      })
      // _.isFunction(callback) && (this.successCallback = callback)
    },
    /**
     * 选择表格行数据
     */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    },
    /**
     * 模态框确定
     */
    handleOk() {
      // const paramList = _.cloneDeep(this.selectedRows)
      // console.log(paramList);
      // const resonseParamList = paramList.map(item => {
      const resonseParamList = this.selectedRows.map(item => {
        return {
          referenceType: item.referenceType,
          referenceName: item.batchName,
          referenceId: item.id
        }
      })
      this.$emit('update:paramValues', resonseParamList)
      console.log(resonseParamList);
      // _.isFunction(this.successCallback) && this.successCallback(resonseParamList)
      this.handleCancel()
    },
    /**
     * 获取列表信息
     */
    async getList() {
      this.listLoading = true
      const res = await getFullProductBatchListExt(Object.assign({parentType:-1},this.listQuery)).finally(() => {
        this.listLoading = false
      })
      if (res.code === '200') {
        const cloneResult = _.cloneDeep(res.data)
        this.tmpSelectRecords.push(...cloneResult)
        this.pagination.current = this.listQuery.pageIndex
        this.pagination.pageNo = this.listQuery.pageIndex
        this.pagination.pageSize = this.listQuery.pageSize
        this.pagination.total = res.totalRecords
        this.pagination.current = this.listQuery.pageIndex
        this.data = res.data
      }
    },
    /**
     * 切换表格页
     */
    changePage(page, paSize) {
      this.pagination.current = page
      this.pagination.pageSize = paSize
      this.listQuery = {
        pageIndex: page,
        pageSize: paSize
      }
      this.choose = null
      this.getList()
    },
    /**
     * 选择table行
     */
    onSelectChange(selectedRowKeys, selectedRows, id) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      this.tmpSelectRecords.push(...selectedRows)
      this.choose = null
    },
    /**
     * 传输选择的记录
     */
    transferSelectRecords(callback) {
      this.tmpSelectRecords = _.uniqBy(this.tmpSelectRecords, 'id')
      this.tmpSelectRecords = this.tmpSelectRecords.filter(item => {
        return this.selectedRowKeys.includes(item.id)
      })
      callback(this.tmpSelectRecords)
    }
  },
  watch: {
    selectedArr: {
      handler(newSelectedArr) {
        newSelectedArr.length &&
          newSelectedArr.forEach(item => this.selectedRowKeys.push(item))
      },
      deep: true,
      immediate: true
    },
    filterSearch: {
      handler(newVal) {
        Object.assign(this.listQuery, newVal)
        delete this.listQuery.categoryId
        if (newVal.filterSearch === false) {
          this.$refs.bmyTableRef &&
            this.$refs.bmyTableRef.resetFilterSearchContent &&
            this.$refs.bmyTableRef.resetFilterSearchContent()
        }
      },
      deep: true,
      // immediate: true
    }
  }
}
</script>
<style lang="scss" scoped>
  ::v-deep .ant-form-item {
    margin-bottom: 0px;
  }
</style>

是模仿下面写的。

<template>
  <a-modal
    title="选择实物"
    v-if="visible"
    :centered="true"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="'80%'"
    :destoryOnClose="true"
    :bodyStyle="{ padding: '10px 10px', height: '800px', overflowY: 'scroll' }"
  >
    <product-frame-list ref="productFrameListRef" :currentSelectedKeys="currentSelectedKeys"></product-frame-list>
  </a-modal>
</template>
<script>
import ProductFrameList from '@/views/materialcenter/productManagement/components/ProductFrameList'
export default {
  props: {
    paramValues: Array
  },
  data() {
    return {
      visible: false,
    }
  },
  components: {
    ProductFrameList
  },
  computed: {
    currentSelectedKeys() {
      return this.paramValues.map(item => item.referenceId)
    }
  },
  methods: {
    /**
     * 模态框确认
     */
    handleOk() {
      if (this.$refs.productFrameListRef.isSelected) {
        const targetParams = this.$refs.productFrameListRef.selectedRows.map(item => {
          return {
            referenceType: item.referenceType,
            referenceName: item.name,
            referenceId: item.id
          }
        })
        this.$emit('update:paramValues', targetParams)
      }
      this.handleCancel()
    },
    /**
     * 模态框取消
     */
    handleCancel() {
      this.visible = false
    },
    /**
     * 打开模态框
     */
    openModalEvent(preThis) {
      this.visible = true
      this.$nextTick(() => {
        this.$refs.productFrameListRef.getList()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
</style>

<template>
  <div class="product-frame-list">
    <bmy-table
      ref="bmyTableRef"
      :loading="listLoading"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      :columns="showColumns"
      :data-source="data"
      :pagination="pagination"
      :searchContentObj="searchContent"
      :selectContentObj="selectContent"
      :scroll="{ x: '100%', y: '100%' }"
      rowKey="id"
      :isSearch="true"
      :isSelectContent="false"
    >
      <template v-slot:unitNames="{ text, record }">
        <span>{{ showUnitNames(text) }}</span>
      </template>
      <template v-slot:name="{ record }">
        <a class="link-button" @click="handleItemClick(record)">{{
          record.name
        }}</a>
      </template>
      <template v-slot:params="{ text, record }">
        <a-tooltip placement="bottomLeft">
          <template slot="title">
            <p v-for="item in text" :key="item.paramName">
              {{ item.paramName }}
            </p>
          </template>
          <span>{{ showProductFields(text) }}</span>
        </a-tooltip>
      </template>
      <template v-slot:productBatchFields="{ text, record }">
        <a-tooltip placement="bottomLeft">
          <template slot="title">
            <p v-for="item in text" :key="item.paramName">
              {{ item.paramName }}
            </p>
          </template>
          <span>{{ showProductFields(text) }}</span>
        </a-tooltip>
      </template>
      <template v-slot:createInfo="{ record }">
        <p>创建人：{{ record.createMan }}</p>
        <p>创建时间：{{ record.createTime }}</p>
      </template>
      <!-- 操作 -->
      <div slot="action" slot-scope="{ record }" class="action-container">
        <a-space>
          <a-tooltip placement="top">
            <template slot="title">
              <span>编辑产品种类</span>
            </template>
            <a-icon type="form" @click="handleEditClick(record)" />
          </a-tooltip>
          <a-popconfirm
            title="是否要删除此行？"
            @confirm="removeProductFrame(record.id)"
          >
            <a-tooltip placement="top">
              <template slot="title">
                <span>删除产品种类</span>
              </template>
              <a-icon type="delete" />
            </a-tooltip>
          </a-popconfirm>
        </a-space>
      </div>
    </bmy-table>
    <create-product-frame
      ref="createProductFrameRef"
      :productFrameSuccess="getList"
    ></create-product-frame>
  </div>
</template>
<script>
import CreateProductFrame from './CreateProductFrame'
import {
  getFullProductFrameList,
  removeProductFrame,
  getFullProductInfoList
} from '@/api/materialCenter'
const columns = [
  {
    title: 'ID',
    dataIndex: 'frameNo',
    searchType: 'string'
  },
  {
    title: '种类名称',
    dataIndex: 'name',
    width: '200px',
    defaultSearch: true,
    scopedSlots: { customRender: 'name' },
    searchType: 'string',
    innerSearch: true
  },
  {
    title: '种类编号',
    dataIndex: 'prefix',
    width: '200px',
    // defaultSearch: true,
    searchType: 'string',
    innerSearch: true
  },
  {
    title: '产品字段',
    dataIndex: 'params',
    // searchType: 'string',
    scopedSlots: { customRender: 'params' },
    ellipsis: true
  },
  {
    title: '批次字段',
    dataIndex: 'productBatchFields',
    scopedSlots: { customRender: 'productBatchFields' },
    ellipsis: true
  },
  {
    title: '单位',
    dataIndex: 'unitNames',
    scopedSlots: { customRender: 'unitNames' }
  },
  {
    title: '创建信息',
    scopedSlots: { customRender: 'createInfo' }
  },
  // {
  //   title: '创建人',
  //   dataIndex: 'createMan',
  //   searchType: 'string'
  // },
  // {
  //   title: '创建时间',
  //   dataIndex: 'createTime',
  //   searchType: 'time'
  // },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    fixed: 'right',
    width: 120
  }
]
export default {
  props: {
    filterSearch: {
      type: Object,
      default: () => {}
    },
    currentSelectedKeys: {
      type: Array,
      default: () => []
    }
  },
  components: {
    CreateProductFrame
  },
  data() {
    return {
      /**
       * 是否点击了表格的选择
       */
      isSelected: false,
      data: [],
      listLoading: false,
      showColumns: columns,
      choose: null,
      listQuery: Object.assign(
        { pageIndex: 1, pageSize: 10 },
        this.filterSearch
      ),
      productFrameInfo: {},
      selectedRowKeys: this.currentSelectedKeys, // 选择的条目index
      selectedRows: [],
      pagination: {
        current: 1,
        pageNo: 1,
        pageSize: 10, // 默认每页显示数量
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: total => `总共有 ${total} 项`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.pageSize = pageSize
          this.pageNo = 1
          this.listQuery = {
            pageIndex: 1,
            pageSize: pageSize
          }
          this.getList()
          this.choose = null
        }, // 改变每页数量时更新显示
        onChange: (page, pageSize) => this.changePage(page, pageSize), //点击页码事件
        total: 0 //总条数
      },
      searchContent: {
        searchBody: columns,
        handleToolSearch: (value, complexSearch) => {
          complexSearch = complexSearch || false
          console.log(value)
          Object.assign(this.listQuery, value)
          let tmp = {
            pageIndex: 1,
            pageSize: this.listQuery.pageSize
          }
          Object.assign(tmp, value, { filterSearch: complexSearch })
          this.listQuery = tmp
          this.getList()
        }
      },
      selectContent: {
        selectOutData: columns,
        getSelectData: value => {
          this.showColumns = value
        }
      }
    }
  },
  methods: {
    /**
     * 编辑产品种类
     */
    handleEditClick(record) {
      this.$refs.createProductFrameRef.openCreateProductFrameModal(
        'productFrameList',
        record
      )
    },
    /**
     * 删除种类
     */
    async removeProductFrame(id) {
      const res = await removeProductFrame({ id })
      if (res.code === '200') {
        this.getList()
      }
    },
    /**
     * 选择table行
     */
    onSelectChange(selectedRowKeys, selectedRows) {
      this.isSelected = true
      this.selectedRowKeys = selectedRowKeys
      if (selectedRowKeys.length === selectedRows.length) {
        this.selectedRows = selectedRows
      } else {
        this.selectedRows = selectedRowKeys.map(
          key =>
            this.selectedRows.find(row => row.id === key) ||
            selectedRows.find(row => row.id === key)
        )
      }
    },
    /**
     * 列表点击事件
     */
    async handleItemClick(record) {
      this.listQuery = {
        pageIndex: 1,
        pageSize: 10,
        categoryId: record.id,
        name: ''
      }
      this.listLoading = true
      /**
       * 请求产品种类/产品基本 list
       */
      this.productFrameInfo = _.cloneDeep(record)
      this.$emit(
        'switchProductClick',
        'product',
        this.productFrameInfo,
        this.listQuery
      )
      // this.$emit(
      //   "changeComponentId",
      //   "productInfoListRight",
      //   "productFrameInfoListRight"
      // );
      this.listLoading = false
    },
    /**
     * 改变页码
     */
    changePage(page, paSize) {
      this.pagination.current = page
      this.pagination.pageSize = paSize
      this.listQuery = {
        pageIndex: page,
        pageSize: paSize
      }
      this.choose = null
      this.getList()
    },
    /**
     * 获取框架列表
     */
    async getList() {
      this.listLoading = true
      const res = await getFullProductFrameList(this.listQuery).finally(() => {
        this.listLoading = false
      })
      if (res.code === '200') {
        this.pagination.current = this.listQuery.pageIndex
        this.pagination.pageNo = this.listQuery.pageIndex
        this.pagination.pageSize = this.listQuery.pageSize
        this.pagination.total = res.totalRecords
        this.pagination.current = this.listQuery.pageIndex
        this.data = res.data
      }
    }
  },
  computed: {
    showUnitNames() {
      return unitNames => {
        return unitNames.join('、')
      }
    },
    showProductFields() {
      return productBatchFields => {
        return productBatchFields?.map(v => v.paramName).join('、')
      }
    }
  },
  watch: {
    filterSearch: {
      handler(newVal) {
        Object.assign(this.listQuery, newVal)
        delete this.listQuery.categoryId
        if (newVal.filterSearch === false) {
          this.$refs.bmyTableRef &&
            this.$refs.bmyTableRef.resetFilterSearchContent &&
            this.$refs.bmyTableRef.resetFilterSearchContent()
        }
      },
      deep: true,
      immediate: true
    }
  }
}
</script>
<style lang="scss" scoped></style>