422 lines
9.3 KiB
Vue
422 lines
9.3 KiB
Vue
<!--
|
|
filename: index.vue
|
|
author: liubin
|
|
date: 2023-10-19 10:03:42
|
|
description:
|
|
-->
|
|
|
|
<template>
|
|
<div class="app-container">
|
|
<!-- 搜索工作栏 -->
|
|
<SearchBar :formConfigs="searchBarFormConfig" ref="search-bar" />
|
|
|
|
<section class="process-flow">
|
|
<el-button class="process-item__add-btn" @click="handleAdd">
|
|
+ 新增工艺
|
|
</el-button>
|
|
<ProcessItem
|
|
v-for="item in list"
|
|
:key="item.id"
|
|
:id="item.id"
|
|
:name="item.name"
|
|
:line="item.lineName"
|
|
:desc="item.remark"
|
|
:isActive="item.enabled"
|
|
@edit="handleUpdate"
|
|
@copy="handleCopy"
|
|
@delete="handleDelete" />
|
|
</section>
|
|
|
|
<base-dialog
|
|
:dialogTitle="title"
|
|
:dialogVisible="open"
|
|
@close="cancel"
|
|
@cancel="cancel"
|
|
width="45%"
|
|
@confirm="submitForm">
|
|
<DialogForm
|
|
v-if="open"
|
|
key="index-dialog-form"
|
|
ref="form"
|
|
v-model="form"
|
|
:rows="rows" />
|
|
</base-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import basicPageMixin from '@/mixins/lb/basicPageMixin';
|
|
// import cache from '@/utils/cache';
|
|
|
|
const ProcessItem = {
|
|
name: 'ProcessItem',
|
|
components: {},
|
|
props: ['id', 'name', 'line', 'desc', 'isActive'],
|
|
data() {
|
|
return {};
|
|
},
|
|
computed: {},
|
|
methods: {
|
|
handleEdit() {
|
|
this.$emit('edit', this.id);
|
|
},
|
|
handleCopy() {
|
|
this.$emit('copy', this.id);
|
|
},
|
|
handleDelete() {
|
|
this.$emit('delete', this.id);
|
|
},
|
|
handleViewDetail(e) {
|
|
this.$router.push({
|
|
name: 'ProcessFlowView',
|
|
params: {
|
|
id: this.id,
|
|
},
|
|
});
|
|
},
|
|
},
|
|
render: function (h) {
|
|
return (
|
|
<div
|
|
class={'process-item' + (this.isActive ? ' active' : '')}
|
|
style="display: flex; flex-direction: column; position: relative;">
|
|
<div
|
|
class="process-item__content"
|
|
style="flex: 1; display: flex; align-items: center; cursor: pointer;"
|
|
title="点击查看详细工序列表"
|
|
onClick={this.handleViewDetail}>
|
|
{this.isActive ? (
|
|
<span style="display: inline-block; width: 10px; height: 10px; border-radius: 100%; background: #0ebe3a; position: absolute; top: 20px; right: 20px;" />
|
|
) : (
|
|
''
|
|
)}
|
|
<svg-icon
|
|
icon-class="tree-table"
|
|
style="margin-left: 12px; width: 48px; height: 48px; color: #0858ff33"
|
|
/>
|
|
<div
|
|
class="info"
|
|
style="margin-left: 12px; display: flex; flex-direction: column;">
|
|
<h2 style="margin: 20px 0 0; font-weight: 600; font-size: 18px; ">
|
|
{this.name}
|
|
</h2>
|
|
<h3 style="margin: 0; font-weight: 400; font-size: 14px; line-height: 2; color: #888;">
|
|
{this.line || '/'}
|
|
</h3>
|
|
<p style="margin: 0; text-overflow: ellipse; white-space: nowrap; font-weight: 400; font-size: 14px; line-height: 1.25; color: #888;">
|
|
{this.desc}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="process-item__footer"
|
|
style="background: #f7f9fa; border-top: 1px solid #0001;">
|
|
<el-row gutter={20}>
|
|
<el-col
|
|
span={8}
|
|
style="text-align: center; border-right: 1px solid #0001">
|
|
<el-button
|
|
type="text"
|
|
style="color: #0007; line-height: 1.75"
|
|
onClick={this.handleEdit}>
|
|
编辑
|
|
</el-button>
|
|
</el-col>
|
|
<el-col
|
|
span={8}
|
|
style="text-align: center; border-right: 1px solid #0001">
|
|
<el-button
|
|
type="text"
|
|
style="color: #0007; line-height: 1.75"
|
|
onClick={this.handleCopy}>
|
|
复制
|
|
</el-button>
|
|
</el-col>
|
|
<el-col span={8} style="text-align: center;">
|
|
<el-button
|
|
type="text"
|
|
style="color: #0007; line-height: 1.75"
|
|
onClick={this.handleDelete}>
|
|
删除
|
|
</el-button>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
|
|
export default {
|
|
name: 'ProcessFlow',
|
|
components: { ProcessItem },
|
|
mixins: [basicPageMixin],
|
|
props: {},
|
|
data() {
|
|
return {
|
|
updateUrl: '/extend/process-flow/update',
|
|
addUrl: '/extend/process-flow/create',
|
|
pageUrl: '/extend/process-flow/page',
|
|
infoUrl: '/extend/process-flow/get',
|
|
searchBarKeys: ['name', 'code', 'lineId', 'productId'],
|
|
searchBarFormConfig: [
|
|
{
|
|
label: '工艺流程列表',
|
|
},
|
|
],
|
|
queryParams: {
|
|
pageNo: 1,
|
|
pageSize: 10,
|
|
code: null,
|
|
name: null,
|
|
productId: null,
|
|
lineId: null,
|
|
},
|
|
lineList: null,
|
|
list: [],
|
|
rows: [
|
|
[
|
|
{
|
|
input: true,
|
|
label: '工艺名称',
|
|
prop: 'name',
|
|
rules: [{ required: true, message: '工艺名称不能为空', trigger: 'blur' }],
|
|
// bind: {
|
|
// disabled: this.editMode == 'detail', // some condition, like detail mode...
|
|
// }
|
|
},
|
|
{
|
|
input: true,
|
|
label: '工艺编码',
|
|
prop: 'code',
|
|
url: '/extend/process-flow/getCode',
|
|
},
|
|
],
|
|
[
|
|
{
|
|
select: true,
|
|
label: '产线',
|
|
prop: 'lineId',
|
|
rules: [{ required: true, message: '产线不能为空', trigger: 'blur' }],
|
|
// cache: 'processFlow::lineList',
|
|
url: '/base/core-production-line/listAll',
|
|
bind: {
|
|
filterable: true,
|
|
},
|
|
},
|
|
|
|
{
|
|
switch: true,
|
|
label: '是否启用',
|
|
prop: 'enabled',
|
|
bind: {
|
|
'active-value': 1,
|
|
'inactive-value': 0,
|
|
},
|
|
},
|
|
],
|
|
[
|
|
{
|
|
textarea: true,
|
|
label: '工艺描述',
|
|
prop: 'remark',
|
|
rules: [{ required: true, message: '工艺描述不能为空', trigger: 'blur' }],
|
|
},
|
|
],
|
|
],
|
|
form: {
|
|
id: null,
|
|
code: null,
|
|
name: null,
|
|
productId: null,
|
|
lineId: null,
|
|
enabled: 1,
|
|
remark: null,
|
|
externalCode: null,
|
|
},
|
|
};
|
|
},
|
|
computed: {},
|
|
mounted() {
|
|
this.getList();
|
|
},
|
|
methods: {
|
|
cancel() {
|
|
this.open = false;
|
|
this.reset();
|
|
},
|
|
reset() {
|
|
this.form = {
|
|
id: null,
|
|
code: null,
|
|
name: null,
|
|
productId: null,
|
|
lineId: null,
|
|
enabled: 1,
|
|
remark: null,
|
|
externalCode: null,
|
|
};
|
|
this.resetForm('form');
|
|
},
|
|
handleAdd() {
|
|
this.reset();
|
|
this.open = true;
|
|
this.showUploadComponents = false;
|
|
this.title = '添加工艺';
|
|
},
|
|
async handleUpdate(id) {
|
|
this.reset();
|
|
const { data } = await this.info({ id });
|
|
this.form = data;
|
|
this.open = true;
|
|
this.title = '修改工艺';
|
|
},
|
|
async handleCopy(id) {
|
|
this.$confirm('确认拷贝操作？', '提示', {
|
|
confirmButtonText: '确 认',
|
|
cancelButtonText: '取 消',
|
|
})
|
|
.then(async () => {
|
|
const { code } = await this.http(
|
|
'/extend/process-flow/copy',
|
|
'get',
|
|
{
|
|
id,
|
|
}
|
|
);
|
|
if (code == 0) {
|
|
this.$modal.msgSuccess('复制成功');
|
|
this.getList();
|
|
}
|
|
})
|
|
.catch(() => console.info('操作取消'));
|
|
},
|
|
async handleDelete(id) {
|
|
this.$confirm('确认删除这个工艺吗？', '提示', {
|
|
confirmButtonText: '确 认',
|
|
cancelButtonText: '取 消',
|
|
})
|
|
.then(async () => {
|
|
const { code } = await this.http(
|
|
'/extend/process-flow/delete?id=' + id,
|
|
'delete'
|
|
);
|
|
if (code == 0) {
|
|
this.$modal.msgSuccess('删除成功');
|
|
this.getList();
|
|
}
|
|
})
|
|
.catch(() => console.info('操作取消'));
|
|
},
|
|
submitForm() {
|
|
this.$refs['form'].validate((valid) => {
|
|
if (!valid) {
|
|
return;
|
|
}
|
|
// 修改的提交
|
|
if (this.form.id != null) {
|
|
this.put(this.form).then((response) => {
|
|
this.$modal.msgSuccess('修改成功');
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
return;
|
|
}
|
|
// 添加的提交
|
|
this.post(this.form).then((response) => {
|
|
this.$modal.msgSuccess('新增成功');
|
|
this.open = false;
|
|
this.getList();
|
|
});
|
|
});
|
|
},
|
|
|
|
async getList() {
|
|
this.loading = true;
|
|
// const { code, data } = await this.recv(this.queryParams);
|
|
const { code, data } = await this.http('/extend/process-flow/listAll', 'get');
|
|
if (code == 0) {
|
|
this.list = data;
|
|
// this.total = data.total;
|
|
this.loading = false;
|
|
return;
|
|
}
|
|
this.loading = false;
|
|
},
|
|
|
|
// async getList() {
|
|
// this.loading = true;
|
|
// const { code, data } = await this.recv(this.queryParams);
|
|
// if (code == 0) {
|
|
// const list = [];
|
|
// for (const item of data.list) {
|
|
// const newItem = await this.itemAttachName(item);
|
|
// list.push(newItem);
|
|
// }
|
|
// this.list = list;
|
|
// this.total = data.total;
|
|
// this.loading = false;
|
|
// return;
|
|
// }
|
|
// this.loading = false;
|
|
// },
|
|
|
|
// async itemAttachName(item) {
|
|
// if (!this.lineList) {
|
|
// this.lineList = await cache.getList(
|
|
// 'processFlow::lineList',
|
|
// async () => {
|
|
// const { code, data } = await this.$axios(
|
|
// '/base/core-production-line/listAll'
|
|
// );
|
|
// if (code == 0) {
|
|
// return data;
|
|
// }
|
|
// }
|
|
// );
|
|
// }
|
|
// return {
|
|
// ...item,
|
|
// lineName: this.lineList.find((line) => line.id == item.lineId)?.name,
|
|
// };
|
|
// },
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.process-flow {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
|
grid-auto-rows: 200px;
|
|
gap: 24px;
|
|
}
|
|
|
|
.process-item__add-btn {
|
|
display: grid;
|
|
border: 1px solid #ccc;
|
|
font-size: 20px;
|
|
color: #ccc;
|
|
border-style: dashed;
|
|
border-radius: 6px;
|
|
place-items: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease-in;
|
|
|
|
&:hover {
|
|
color: #555;
|
|
border-color: #555;
|
|
}
|
|
}
|
|
|
|
.process-item {
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 6px 1px #ccc;
|
|
overflow: hidden;
|
|
|
|
// &.active {
|
|
// box-shadow: 0 0 6px 1px #18c8bf66;
|
|
// }
|
|
}
|
|
</style>
|