<!--
|
* @Date: 2025-07-01 20:45:15
|
* @LastEditors: 李喆(开发组) lzhe@yxqiche.com
|
* @LastEditTime: 2025-08-11 09:55:37
|
* @FilePath: /mdmweb/src/views/flow/components/TodolistLeft.vue
|
-->
|
<template>
|
<basic-container>
|
<div class="tool">
|
<avue-form :option="attOption"
|
v-model="attForm"
|
:upload-after="uploadAfter" class="att-box"></avue-form>
|
</div>
|
<el-table :data="tableData" border @row-click="showContent" max-height="200">
|
<!-- <el-table-column prop="machineCode" label="加工机床">
|
</el-table-column> -->
|
<el-table-column prop="name" label="程序名称">
|
</el-table-column>
|
<el-table-column fixed="right" label="操作" width="60" align="center">
|
<template #default="scope" >
|
<el-button type="text" size="small" @click.stop="del(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="50%" v-if="appDialog">
|
<avue-crud :option="optionApp" v-model="form" v-model:page="page" ref="crud" :data="appData"
|
@current-change="currentChange" @size-change="sizeChange"
|
@on-load="onLoad" @selection-change="selectionChange">
|
<template #search="{ }"></template>
|
<template #search-menu="{ }"></template>
|
</avue-crud>
|
<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';
|
export default {
|
props: {
|
row: {
|
type: Object,
|
},
|
replaceDataId: {type: String},
|
drawingNo: {type: String},
|
processNo: {type: String}
|
},
|
data() {
|
return {
|
showContentId: '',
|
attForm: {
|
att: '',
|
}, //程序上传表单
|
attOption: {
|
submitBtn: false,
|
emptyBtn: false,
|
menu: false,
|
column: [
|
{
|
label: '添加程序',
|
prop: 'att',
|
type: 'upload',
|
multiple: true,
|
action: '/api/blade-mdm/flow/replace/upload',
|
span: 24,
|
data: {
|
processInstanceId: this.replaceDataId,
|
drawingNo: this.drawingNo, //图号
|
processNo: this.processNo //工序号
|
},
|
}
|
]
|
}, //程序上传
|
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('上传成功');
|
this.attForm.att = '';
|
return done();
|
} else {
|
this.$message.warning(res.msg || '上传失败');
|
done()
|
}
|
},
|
getAttList () {
|
//console.log(this.row.processInstanceId)
|
getSelectedAppList(this.replaceDataId).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('删除失败');
|
}
|
})
|
}
|
},
|
}
|
</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>
|
