<!--
|
* @Date: 2025-07-01 20:45:15
|
* @LastEditors: gaoshp
|
* @LastEditTime: 2025-08-13 23:18:26
|
* @FilePath: /mdmweb/src/views/flow/components/TodolistLeft.vue
|
-->
|
<template>
|
<basic-container>
|
<div class="tool" v-show="['programmingTask','cureProgramTask','repalceProgrammingTask'].includes(row.taskDefinitionKey)">
|
<el-button type="primary" plain @click="addApp">添加文件
|
</el-button>
|
</div>
|
<el-table :data="tableData" border @row-click="showContent" max-height="200">
|
<!-- <el-table-column prop="machineCode" label="加工机床">
|
</el-table-column> -->
|
<el-table-column type="index" label="#" width="40" align="center"/>
|
<el-table-column prop="name" label="程序名称">
|
<template #default="{ row }">
|
<div style="display: flex;align-items: center;">
|
<span style="margin-right: 8px;">{{ row.name }}</span>
|
<el-icon v-if="row.fileType ==='other'"><FolderOpened /></el-icon>
|
<img v-else src="./app.jpg" alt="" width="16" height="16">
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="150" align="center">
|
<template #default="scope" >
|
<el-button v-show="['programmingTask','cureProgramTask','repalceProgrammingTask'].includes(row.taskDefinitionKey)" type="text" size="small" @click.stop="del(scope.$index,scope.row)">删除</el-button>
|
<el-button type="text" size="small" @click.stop="downloadFile(scope.$index,scope.row)">下载</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<h4>程序内容</h4>
|
<div v-html="appContent" class="app-content">
|
</div>
|
<el-dialog title="程序选择" v-model="appDialog" width="400" v-if="appDialog">
|
<avue-form :option="attOption"
|
v-model="attForm"
|
:upload-after="uploadAfter" class="att-box"></avue-form>
|
<!-- <div slot="footer" class="dialog-footer">
|
<el-button @click="appDialog = false">取 消</el-button>
|
<el-button type="primary" @click="add">确 定</el-button>
|
</div> -->
|
</el-dialog>
|
</basic-container>
|
</template>
|
|
<script>
|
import { getAppList,getSelectedAppList,getContent,removeAtt} from '@/api/flow/todolist';
|
import { exportBlob } from '@/api/common';
|
import { getToken } from '@/utils/auth';
|
import NProgress from 'nprogress';
|
import { downloadXls } from '@/utils/util';
|
export default {
|
props: {
|
row: {
|
type: Object,
|
}
|
},
|
watch: {
|
'attForm.fileType': {
|
handler(newVal) {
|
this.attOption.column[1].data.fileType = newVal;
|
},
|
immediate: true,
|
},
|
},
|
data() {
|
return {
|
showContentId: '',
|
attForm: {
|
att: '',
|
fileType: 'program'
|
}, //程序上传表单
|
attOption: {
|
submitBtn: false,
|
emptyBtn: false,
|
menu: false,
|
column: [
|
{
|
label: '文件类型',
|
prop: 'fileType',
|
type: 'select',
|
span: 24,
|
clearable: false,
|
dicData: [
|
{ label: '程序文件', value: 'program' },
|
{ label: '其他文件', value: 'other' },
|
],
|
},
|
{
|
label: '添加文件',
|
prop: 'att',
|
type: 'upload',
|
multiple: true,
|
action: '/api/blade-mdm/flow/mgr/ncupload',
|
span: 24,
|
data: {
|
processInstanceId: this.row.processInstanceId,
|
fileType: 'program',
|
},
|
}
|
]
|
}, //程序上传
|
tableData: [],//已选程序
|
appContent: '',//程序内容
|
appDialog: false,
|
form: {},
|
page: {
|
page: 1,
|
size: 10,
|
total: 0,
|
},
|
appData: [],
|
selectionList: [],
|
optionApp: {
|
menu: false,
|
gridBtn: false,
|
addBtn: false,
|
editBtn: false,
|
delBtn: false,
|
columnBtn: false,
|
refreshBtn: false,
|
searchShowBtn: false,
|
tip: false,
|
searchShow: false,
|
dialogWidth: '60%',
|
border: true,
|
index: true,
|
selection: true,
|
menuWidth: 100,
|
dialogClickModal: false,
|
column: [
|
{
|
label: '加工机床',
|
prop: 'machineCode',
|
},
|
{
|
label: '程序名称',
|
prop: 'name',
|
},
|
// {
|
// label: '工序名称',
|
// prop: 'processName',
|
// },
|
],
|
},
|
}
|
},
|
mounted() {
|
this.getAttList();
|
this.onLoad(this.page);
|
},
|
methods: {
|
uploadAfter(res, done, loading, column) {
|
if (res.code === 200) {
|
this.getAttList();
|
this.$message.success(res.msg || '上传成功');
|
this.attForm.att = '';
|
this.attForm.fileType = 'program'
|
this.appDialog = false
|
return done();
|
} else {
|
console.log(res)
|
this.$message.warning(res.msg || '上传失败');
|
done()
|
}
|
},
|
getAttList () {
|
getSelectedAppList(this.row.processInstanceId).then(res => {
|
if (res.data.code !== 200) {
|
this.$message.error('获取已选程序失败');
|
return;
|
} else {
|
this.tableData = res.data.data || [];
|
}
|
// this.$emit('selection-change',this.tableData)
|
})
|
},
|
addApp() {
|
this.appDialog = true;
|
},
|
currentChange(currentPage) {
|
this.page.currentPage = currentPage;
|
},
|
sizeChange(pageSize) {
|
this.page.pageSize = pageSize;
|
},
|
selectionChange(list) {
|
this.selectionList = list;
|
},
|
onLoad(page, params = {}) {
|
const query = {}
|
getAppList(page.currentPage, page.pageSize, Object.assign(query, params)).then(res => {
|
const data = res.data.data;
|
this.page.total = data.total;
|
this.appData = data.records;
|
});
|
},
|
add () {
|
console.log('add')
|
this.tableData = this.tableData.concat(this.selectionList.filter(item => {
|
return !this.tableData.some(existingItem => existingItem.id === item.id);
|
}));
|
this.appDialog = false;
|
this.$emit('selection-change',this.tableData)
|
},
|
showContent (row, column, event) {
|
if(!row?.id) {
|
this.showContentId = ''
|
return this.appContent = '';
|
}
|
this.showContentId = row.id
|
getContent(row.id).then(res => {
|
if(res.data.code === 200) {
|
this.appContent = res.data.data
|
} else {
|
this.appContent = '程序内容加载失败'
|
}
|
})
|
},
|
del (index,row) {
|
if(row.id === this.showContentId) {
|
this.showContentId = '';
|
this.showContent(null, null, null);
|
}
|
removeAtt(row.id).then(res => {
|
if(res.data.code === 200) {
|
this.$message.success('删除成功');
|
this.getAttList();
|
} else {
|
this.$message.error('删除失败');
|
}
|
})
|
},
|
downloadFile(index,row) {
|
NProgress.start();
|
exportBlob(
|
`/blade-mdm/flow/mgr/down-flow-file?id=${row.id}`
|
).then(res => {
|
console.log(res)
|
if(res.status !== 200) {
|
return this.$message.error(res.msg);
|
}
|
downloadXls(res.data, `${row.name}`);
|
NProgress.done();
|
});
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.tool {
|
text-align: right;
|
margin-bottom: 10px;
|
}
|
|
.dialog-footer {
|
text-align: center;
|
}
|
.app-content {
|
background-color: #fffee1;
|
padding: 10px 30px;
|
min-height: 100px;
|
overflow: auto;
|
max-height: 400px;
|
white-space: pre-wrap;
|
}
|
|
</style>
|
<style lang="scss">
|
.att-box {
|
.el-form-item--default {
|
margin-bottom: 0;
|
}
|
.avue-form__menu--center {
|
display: none;
|
}
|
}
|
</style>
|
