<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: {
|
|
},
|
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,
|
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
|
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
|
}
|
})
|
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.saveParam.modelKey = row.modelKey
|
},
|
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>
|
