hitch-sb-antd/src/views/activiti/user-model/modules/ActivitiUserModelTable.vue

<template>
  <a-modal
    :title="modalTitle"
    :width="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    class="ant-modal2"
    @cancel="handleCancel"
  >
    <div class="table-operator" style="margin-bottom: 8px;">
    </div>
    <a-table
      bordered
      :data-source="data"
      :columns="columns"
      tableLayout="auto"
      rowKey="id"
      :row-selection="rowSelection">
      <span slot="action" slot-scope="record">
        <template>
          <a @click="handleView(record)">查看</a>
          <a-divider type="vertical" />
          <a @click="handleEdit(record)">修改</a>
        </template>
      </span>
    </a-table>
    <template slot="footer">
      <a-button :loading="confirmLoading" type="primary" @click="save()">保存</a-button>
    </template>
    <base-form ref="baseModal" :roleList="roleList" @ok="handleOk"/>
    <detail ref="detailModal" @ok="handleOk"/>
  </a-modal>
</template>

<script>
import {
  fetchActivitiUserModel,
  fetchActivitiUserModelByModelId,
  updateActivitiUserModelBatch
} from '@/api/activiti/user-model'
import BaseForm from './BaseForm'
import Detail from './Detail'
import { queryRole } from '@/api/upms/role'

export default {
  name: 'ActivitiUserModelTable',
  components: {
    BaseForm,
    Detail
  },
  data () {
    return {
      roleList: [],
      confirmLoading: false,
      modalTitle: null,
      form: this.$form.createForm(this),
      visible: false,
      maskClosable: false,
      model: null,
      storeId: null,
      typeMap: {},
      userList: {},
      storeTreeDate: [],
      rowSelection: {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.selectedRows = selectedRows
        }
      },
      // 表头
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          customRender: (text, record, index) => {
            return `${index + 1}`
          }
        },
        {
          title: '模型id',
          dataIndex: 'reModelId'
        },
        {
          title: '节点名称',
          dataIndex: 'name'
        },
        {
          title: '类型',
          dataIndex: 'type',
          customRender: (text, record, index) => {
            return this.BaseTool.Object.getField(this.typeMap, text)
          }
        },
        {
          title: '流程变量',
          dataIndex: 'formVariable'
        },
        {
          title: '备注',
          dataIndex: 'remark'
        },
        {
          title: '操作',
          key: 'action',
          width: '200px',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        }
      ],
      data: [],
      user: this.$store.getters.userInfo,
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys
        }
      }
    }
  },
  props: {
  },
  created () {
    // 下拉框map
    this.typeMap = this.DictCache.getLabelByValueMapByType(this.DictCache.TYPE.ACTIVITI_USER_MODEL_TYPE)
    this.getRoles()
  },
  methods: {
    getRoles () {
      queryRole({ status: 1 }).then(res => {
        this.roleList = res.data
      })
    },
    base (record) {
      this.visible = true
      this.model = record
      this.modalTitle = '节点设置'
      fetchActivitiUserModelByModelId({ id: record.id }).then(res => {
        this.data = res.data
      })
    },
    handleEdit (record) {
      fetchActivitiUserModel({ id: record.id }).then(res => {
        const modal = this.$refs.baseModal
        modal.base(res.data)
      })
    },
    handleView (record) {
      fetchActivitiUserModel({ id: record.id }).then(res => {
        const modal = this.$refs.detailModal
        modal.base(res.data)
      })
    },
    save () {
      this.confirmLoading = true
      updateActivitiUserModelBatch({ list: this.data, modelId: this.model.id })
        .then(() => {
          this.handleCancel()
        }).catch(() => {
          this.confirmLoading = false
        })
    },
    handleOk () {
      this.visible = true
      this.base(this.model)
    },
    handleCancel (values) {
      this.visible = false
      this.confirmLoading = false
      this.form.resetFields()
      if (this.BaseTool.Object.isNotBlank(values)) {
        this.$emit('ok', values)
      } else {
        this.$emit('ok')
      }
    }
  }
}
</script>