index.vue 6.26 KB
<template>
  <div>
    <dee-table
      :data="showTableData"
      :columns="columns"
      selection-row
      size="small"
      :options="{maxHeight:300}"
      @selection-change="selectionChange"
    >
      <dee-tools slot="header" :tools="tools" mode="normal" :collapse="false" />
    </dee-table>
    <div slot="footer" class="dialog-btn dee-bar">
      <el-button type="primary" size="small" @click="saveConfig">保存</el-button>
      <el-button size="small" @click="close">取消</el-button>
    </div>
  </div>
</template>
<script>
import { getLifecycleTemplateById } from '@/api/config'
import { put, post } from '@/utils/http'
export default {
  name: 'ModifyState',
  componentName: '修改状态',
  props: {
    visible: {
      type: Boolean,
      default: () => false
    },
    basicData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      selection: [],
      columns: [
        { title: '编号', key: 'number' },
        { title: '名称', key: 'name' },
        { title: '生命周期模板', key: 'templateName' },
        { title: '状态', key: 'state', fildProp: {
          type: 'DictDataVO',
          rule: {
            dictTypeCode: 'ObjStatus' }
        }},
        { title: '目标状态', key: 'modifyState',
          component: {
            render: (h, row, col, index) => {
              if (!row || !row.stateOptions) {
                return h('')
              }
              return <el-select v-model={row.modifyState} class='modify-state-select' size='small' v-on:change={(val) => { this.setState(index, row) }}
              >
                {
                  row.stateOptions.map(option => {
                    return <el-option key={option.value} value={option.value} label={option.label} />
                  })
                }

              </el-select>
            }
          }
        },
        { title: '上次修改时间', key: 'modifyTime' }
      ],
      dictLists: {},
      tableData: []
    }
  },
  computed: {
    tools() {
      return [
        {
          name: '收集相关CAD',
          icon: '/icons/c-batchc.png',
          handler: {
            click: () => {
              this.addCADObjects()
            }
          }
        }]
    },
    showTableData() {
      return this.tableData.map(row => {
        row = this.$dict.displayDictValue(row, this.dictLists)
        row.show = true
        return row
      })
    }
  },
  async created() {
    await this.$dict.getDictList(this.columns).then(res => {
      this.dictLists = res
    })
  },
  mounted() {
    this.init()
  },
  methods: {
    setState(index, row) {
      this.tableData[index] = row
    },
    init() {
      this.tableData = []
      if (this.basicData && this.basicData.lifecycleTemplateId) {
        this.tableData.push({ ...this.basicData })
        this.tableData.forEach(async(row) => {
          row = await this.getLifeCycleInfo(row)
        })
      }
    },
    clear() {
      this.tableData = []
    },
    close() {
      this.$emit('cancel')
    },
    selectionChange(selection) {
      this.selection = selection
    },
    addCADObjects() {
      post(`/DxPart/find/recursion`, this.$utils.setSearchParams({
        searchParams: { id: this.basicData.id },
        openPropList: ['buildRules.target']
      })).then(res => {
        if (res.items.content) {
          const list = res.items.content[0].buildRules
          if (!list || list.length === 0) {
            this.$utils.showMessageWarning('未找到相关CAD')
            return
          }

          list.forEach(async(cad) => {
            const r = cad.target
            console.log(r, this.tableData)
            if (!this.tableData.find(row => row && r.id === row.id)) {
              await this.getLifeCycleInfo(r).then(res => {
                this.tableData.push(res)
              })
            }
          })
        }
      })
    },
    saveConfig() {
      if (this.selection.length < 1) {
        this.$utils.showMessageWarning('至少选择一个保存对象!')
        return
      }
      let flag = false
      this.selection.forEach(row => {
        if (!row.modifyState) {
          flag = true
          return true
        }
      })
      if (flag) {
        this.$utils.showMessageWarning('选择对象没有选择修改状态')
        return
      }
      const allChangeApi = this.selection.map(row => {
        const module = this.$utils.getModelName4dxClassName(row.dxClassname)
        return put(`/${module}/lifecycle/changeStatus`, { id: row.id, state: row.modifyState })
        // return put(`${module}/lifecycle/changeStatus?id=${row.id}&status=${row.modifyState}&isVaild=true`)
      })
      Promise.all(allChangeApi).then(res => {
        const count = allChangeApi.length
        if (res.length < count) {
          return
        }
        this.refreshTable()
        this.$utils.showMessageSuccess('修改成功!')
        this.$emit('completeEven')
      })
    },
    refreshTable() {
      const row = this.selection.find(r => r.id === this.basicData.id)
      if (row) {
        row.state = this.$utils.getParamsFromLists(this.dictLists['state'], 'value', row.modifyState, 'label')
        this.$set(this.basicData, 'state', row.state)
        this.$emit('refreshNode', this.basicData)
        const idx = this.tableData.find(r => r.id === row.state)
        this.$set(this.tableData, idx, row)
      }
    },
    getLifeCycleInfo(row) {
      if (!row || !row.lifecycleTemplateId) {
        this.$set(row, 'modifyState', '')
        return Promise.resolve(row)
      }
      return new Promise((resolve, reject) => {
        getLifecycleTemplateById(row.lifecycleTemplateId).then(res => {
          if (res.items) {
            this.$set(row, 'templateName', res.items.name)
            this.$set(row, 'modifyState', '')
            this.$set(row, 'stateOptions', res.items.stateVos.map(r => {
              return {
                value: r.keyCode,
                label: this.$utils.getParamsFromLists(this.dictLists['state'], 'value', r.keyCode, 'label')

              }
            }))
          }
          resolve(row)
        }).catch(() => {
          resolve(row)
        })
      })
    }
  }
}
</script>

<style lang='scss'>
.modify-state-dialog{
  .dialog-btn{
    text-align: center;
  }
  .modify-state-select{
    width: 100%;
    height: 36px;
  }
}
</style>