Source/UBCS-WEB/src/components/template/Stage.vue

@@ -1,262 +1,267 @@
<template>
    <div v-if="Formlist.length>0">
        <avue-crud ref="crud" :table-loading="loading" :data="data" :option="option" :page.sync="page"
            @on-load="getDataList" @size-change="handleSizePage" @current-change="handleCurrentPage"
            @row-click="handleRowClick">
            <template slot-scope="{type,size,row,index}" slot="menu">
                <el-button icon="el-icon-check" :size="size" :type="type"
                    @click="handleMaintenance(row, index)">维护</el-button>
            </template>
        </avue-crud>
        <el-dialog title="模板阶段" width="50%"  append-to-body="true" :visible.sync="dialogNode">
            <avue-crud ref="crud" :table-loading="loading" :data="stageData" :option="stageOption" @on-load="getStagelist"
                @row-click="handleRowStageClick">
                <template slot-scope="{type,size,row,index}" slot="menu">
                    <el-button icon="el-icon-check" :size="size" :type="type"
                        @click="handleMaintenanceTransfer(row, index)">维护</el-button>
                </template>
            </avue-crud>
        </el-dialog>
        <table-transfer v-if="flag" :visible.sync="dialogTransfer" v-model="attributeValue" :dataList="attributeData"
            :columns="columns" keyName="oid" @save="handleSave" @close="handelClose"></table-transfer>
  <div v-if="Formlist.length>0">
    <div style="height: calc(100vh - 553px)">
      <avue-crud ref="crud" :data="data" :option="option" :page.sync="page" :table-loading="loading"
                 @on-load="getDataList" @size-change="handleSizePage" @current-change="handleCurrentPage"
                 @row-click="handleRowClick">
        <template slot="menu" slot-scope="{type,size,row,index}">
          <el-button :size="size" :type="type" icon="el-icon-check"
                     @click="handleMaintenance(row, index)">维护
          </el-button>
        </template>
      </avue-crud>
    </div>
    <el-dialog :visible.sync="dialogNode" append-to-body="true" title="模板阶段" width="50%">
      <avue-crud ref="crud" :data="stageData" :option="stageOption" :table-loading="loading" @on-load="getStagelist"
                 @row-click="handleRowStageClick">
        <template slot="menu" slot-scope="{type,size,row,index}">
          <el-button :size="size" :type="type" icon="el-icon-check"
                     @click="handleMaintenanceTransfer(row, index)">维护
          </el-button>
        </template>
      </avue-crud>
    </el-dialog>
    <table-transfer v-if="flag" v-model="attributeValue" :columns="columns" :dataList="attributeData"
                    :visible.sync="dialogTransfer" keyName="oid" @close="handelClose" @save="handleSave"></table-transfer>
  </div>
</template>

<script>
import { getFlowpathList, stagelist, attributeListRight, attributeList, attributeSave } from '@/api/template/flowpath.js'
import {getFlowpathList, stagelist, attributeListRight, attributeList, attributeSave} from '@/api/template/flowpath.js'
import TableTransfer from '@/components/template/TableTransfer'

export default {
    name: 'Stage',
    components: {
        TableTransfer
  name: 'Stage',
  components: {
    TableTransfer
  },
  props: {
    code: {
      typeof: String,
      required: true,
      default: ""
    },
    props: {
        code: {
            typeof: String,
            required: true,
            default: ""
        },
      Formlist:{
        type:Array,
        default:[]
      }
    },
    watch: {
      code: {
        handler(newval, oldval) {
          this.getDataList()
        }
      }
    },
    data() {
        const options = {
            height: "auto",
            border: true,
            addBtn: false,
            align: 'center',
            menuAlign: 'center',
            index: true,
            searchMenuSpan: 8,
            searchBtn: false,
            emptyBtn: false,
            columnBtn: false,
            delBtn: false,
            refreshBtn: false,
            header: false,
            editBtn: false,
        }
        return {
            attributeData: [],
            attributeValue: [],
            flag: false,
            dialogTransfer: false,
            dialogNode: false,
            visibleTable: false,
            loading: false,
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 0
            },
            modelKey: '',
            data: [],
            stageData: [],
            saveParam: {},
            columns: [
                {
                    key: "oid",
                    label: "oid",
                    visible: false,
                },
                {
                    key: "id",
                    label: "属性编号",
                    visible: true,
                },
                {
                    key: "name",
                    label: "属性名称",
                    visible: true,
                },
                {
                    key: "attributeGroup",
                    label: "属性分组",
                    visible: true,
                },
            ],
            option: {
                ...options,
              height: 383,
                column: [
                    { label: '模板编号', prop: 'modelKey' },
                    { label: '模板名称', prop: 'modelName' },
                    { label: '描述', prop: 'buttonTypeValue' },
                ]
            },
            stageOption: {
                ...options,
              height:620,
                column: [
                    { label: '阶段编号', prop: 'taskId' },
                    { label: '阶段名称', prop: 'taskName' },
                ]
            },
        }
    },
    methods: {
        setTable(data, list) {
            return data.map(item => {
                if (list.length !== 0) {
                    list.forEach(element => {
                        if (item.id === element.attrId) item.checked = true
                    });
                }
                return item
            })
        },
        // 获取列表
        async getDataList() {
          this.loading = false
          if (this.code) {
            const {pageSize, currentPage} = this.page
            let param = {size: pageSize, current: currentPage}
            const response = await getFlowpathList({...param, ...{templateId: this.code}})
            if (response.status === 200) {
              console.log(response)
              this.loading = false
              const data = response.data.data
              this.data = data.records
              this.page.total = data.total
            } else this.loading = false
          }else {
            this.data=[]
          }
        },
        // 获取阶段列表
        async getStagelist() {
            this.loading = false
            console.log(this.modelKey)
            const response = await stagelist({ modelKey: this.modelKey })
            if (response.status === 200) {
                this.loading = false
                console.log(response.data)
                this.stageData = response.data.data
            } else this.loading = false
        },
        // 获取全部属性
        async getAttributeList() {
            const response = await attributeList({ 'conditionMap[classifyTemplateOid]': this.code })
            const responseRight = await attributeListRight({ templateId: this.code, modelKey: this.modelKey, taskId: this.saveParam.taskId })
            if (response.status === 200 && responseRight.status === 200) {
                let datas = response.data.data.records
                let dataRight = responseRight.data.data
                datas = datas.map(item => {
                    const { oid, id, name, attributeGroup } = item
                    item = { oid, id, name, attributeGroup, ...{ checked: false } }
                    if (dataRight.length !== 0) {
                        dataRight.forEach(element => { if (item.id === element.attrId) item.checked = true });
                    }
                    return item
                })
                console.log(datas)
                let dataValue = datas.map(item => item.checked ? item.oid : undefined)
                this.attributeValue = dataValue.filter(item => item)
                this.attributeData = datas
                this.flag = true
            }
        },
        // 获取已保存属性
        async getAttributeListRight() {
            const response = await attributeListRight({ templateId: this.code, modelKey: this.modelKey, taskId: this.saveParam.taskId })
            if (response.status === 200) {
                let data = response.data.data
                data = data.map(item => {
                    const { attrId, attrName, attrGroup } = item
                    return { attrId, attrName, attrGroup }
                })
                this.listRight = data
            }
        },
        // 维护
        handleMaintenance(row) {
            console.log(row)
            this.dialogNode = true
            this.modelKey = row.modelKey
            this.saveParam.modelKey = row.modelKey
            this.getStagelist()
        },
        // 维护
        handleMaintenanceTransfer(row) {
            this.saveParam.taskId = row.taskId
            this.saveParam.taskName = row.taskName
            this.getAttributeList()
            this.$nextTick(() => {
                this.dialogTransfer = true
            })
        },
        handleRowClick(row) {
            console.log(row)
            this.modelKey = row.modelKey
            this.saveParam.modelKey = row.modelKey
            this.dialogNode = true
        },
        handleRowStageClick(row) {
            this.saveParam.taskId = row.taskId
            this.saveParam.taskName = row.taskName
            this.getAttributeList()
            this.$nextTick(() => {
                this.dialogTransfer = true
            })
        },
        async handleSave(event) {
            console.log(event)
            const data = event.map(item => {
                const { id, name, attributeGroup } = item
                return { attrId: id, attrName: name, attrGroup: attributeGroup }
            })
            let param = {
                templateId: this.code,
                processStageAttr: data,
                ...this.saveParam
            }
            console.log(this.saveParam)
            console.log(data)
            const response = await attributeSave(param)
            if (response.status === 200) {
                // loading()
                console.log(response)
                this.$message({
                    type: 'success',
                    message: '新增数据成功！'
                })
                this.flag = false
                // done()
                // this.getDataList()
            }
        },
        handelClose() {
            this.flag = false
        }
    Formlist: {
      type: Array,
      default: []
    }
  },
  watch: {
    code: {
      handler(newval, oldval) {
        this.getDataList()
      }
    }
  },
  data() {
    const options = {
      height:'auto',
      border: true,
      addBtn: false,
      align: 'center',
      menuAlign: 'center',
      index: true,
      searchMenuSpan: 8,
      searchBtn: false,
      emptyBtn: false,
      columnBtn: false,
      delBtn: false,
      refreshBtn: false,
      header: false,
      editBtn: false,
    }
    return {
      attributeData: [],
      attributeValue: [],
      flag: false,
      dialogTransfer: false,
      dialogNode: false,
      visibleTable: false,
      loading: false,
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      modelKey: '',
      data: [],
      stageData: [],
      saveParam: {},
      columns: [
        {
          key: "oid",
          label: "oid",
          visible: false,
        },
        {
          key: "id",
          label: "属性编号",
          visible: true,
        },
        {
          key: "name",
          label: "属性名称",
          visible: true,
        },
        {
          key: "attributeGroup",
          label: "属性分组",
          visible: true,
        },
      ],
      option: {
        ...options,
        height: 330,
        column: [
          {label: '模板编号', prop: 'modelKey'},
          {label: '模板名称', prop: 'modelName'},
          {label: '描述', prop: 'buttonTypeValue'},
        ]
      },
      stageOption: {
        ...options,
        height: 620,
        column: [
          {label: '阶段编号', prop: 'taskId'},
          {label: '阶段名称', prop: 'taskName'},
        ]
      },
    }
  },
  methods: {
    setTable(data, list) {
      return data.map(item => {
        if (list.length !== 0) {
          list.forEach(element => {
            if (item.id === element.attrId) item.checked = true
          });
        }
        return item
      })
    },
    // 获取列表
    async getDataList() {
      this.loading = false
      if (this.code) {
        const {pageSize, currentPage} = this.page
        let param = {size: pageSize, current: currentPage}
        const response = await getFlowpathList({...param, ...{templateId: this.code}})
        if (response.status === 200) {
          this.loading = false
          const data = response.data.data
          this.data = data.records
          this.page.total = data.total
        } else this.loading = false
      } else {
        this.data = []
      }
    },
    // 获取阶段列表
    async getStagelist() {
      this.loading = false
      const response = await stagelist({modelKey: this.modelKey})
      if (response.status === 200) {
        this.loading = false
        this.stageData = response.data.data
      } else this.loading = false
    },
    // 获取全部属性
    async getAttributeList() {
      const response = await attributeList({'conditionMap[classifyTemplateOid]': this.code})
      const responseRight = await attributeListRight({
        templateId: this.code,
        modelKey: this.modelKey,
        taskId: this.saveParam.taskId
      })
      if (response.status === 200 && responseRight.status === 200) {
        let datas = response.data.data.records
        let dataRight = responseRight.data.data
        datas = datas.map(item => {
          const {oid, id, name, attributeGroup} = item
          item = {oid, id, name, attributeGroup, ...{checked: false}}
          if (dataRight.length !== 0) {
            dataRight.forEach(element => {
              if (item.id === element.attrId) item.checked = true
            });
          }
          return item
        })
        let dataValue = datas.map(item => item.checked ? item.oid : undefined)
        this.attributeValue = dataValue.filter(item => item)
        this.attributeData = datas
        this.flag = true
      }
    },
    // 获取已保存属性
    async getAttributeListRight() {
      const response = await attributeListRight({
        templateId: this.code,
        modelKey: this.modelKey,
        taskId: this.saveParam.taskId
      })
      if (response.status === 200) {
        let data = response.data.data
        data = data.map(item => {
          const {attrId, attrName, attrGroup} = item
          return {attrId, attrName, attrGroup}
        })
        this.listRight = data
      }
    },
    // 维护
    handleMaintenance(row) {
      this.dialogNode = true
      this.modelKey = row.modelKey
      this.saveParam.modelKey = row.modelKey
      this.getStagelist()
    },
    // 维护
    handleMaintenanceTransfer(row) {
      this.saveParam.taskId = row.taskId
      this.saveParam.taskName = row.taskName
      this.getAttributeList()
      this.$nextTick(() => {
        this.dialogTransfer = true
      })
    },
    handleRowClick(row) {
      this.modelKey = row.modelKey
      this.saveParam.modelKey = row.modelKey
      this.dialogNode = true
    },
    handleRowStageClick(row) {
      this.saveParam.taskId = row.taskId
      this.saveParam.taskName = row.taskName
      this.getAttributeList()
      this.$nextTick(() => {
        this.dialogTransfer = true
      })
    },
    async handleSave(event) {
      const data = event.map(item => {
        const {id, name, attributeGroup} = item
        return {attrId: id, attrName: name, attrGroup: attributeGroup}
      })
      let param = {
        templateId: this.code,
        processStageAttr: data,
        ...this.saveParam
      }
      const response = await attributeSave(param)
      if (response.status === 200) {
        // loading()
        this.$message({
          type: 'success',
          message: '新增数据成功！'
        })
        this.flag = false
        // done()
        // this.getDataList()
      }
    },
    handelClose() {
      this.flag = false
    }
  }
}
</script>