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

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,255 @@
<template>
    <div>
        <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>
</template>

<script>
import { getFlowpathList, stagelist, attributeListRight, attributeList, attributeSave } from '@/api/template/flowpath.js'
import TableTransfer from '@/components/template/TableTransfer'
export default {
    name: 'Stage',
    components: {
        TableTransfer
    },
    props: {
        code: {
            typeof: String,
            required: true,
            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,
                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
          }
        },
        // èŽ·å–阶段列表
        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
        }
    }
}
</script>