@@ -109,7 +109,7 @@ export default { | |||
default: 0, | |||
}, | |||
}, | |||
inject: ["urls"], | |||
// inject: ["urls"], | |||
data() { | |||
return { | |||
dataList: [], | |||
@@ -0,0 +1,317 @@ | |||
<!-- | |||
filename: detail.vue | |||
author: liubin | |||
date: 2023-07-19 09:00:13 | |||
description: | |||
--> | |||
<template> | |||
<el-dialog | |||
class="dialog-with-menu" | |||
:visible="dialogVisible" | |||
:destroy-on-close="false" | |||
@close="handleClose" | |||
:close-on-click-modal="false"> | |||
<!-- title --> | |||
<div slot="title" class="dialog-title"> | |||
<h1 class="">查看详情</h1> | |||
</div> | |||
<div class="dialog-body__inner relative"> | |||
<!-- menu --> | |||
<el-tabs v-model="activeMenu" type="card" @tab-click="handleTabClick"> | |||
<el-tab-pane v-for="(tab, index) in actualMenus" :key="index" :name="tab.name"> | |||
<span class="slot" slot="label"> | |||
<i | |||
:class="{ | |||
'el-icon-edit': tab.key === 'info', | |||
'el-icon-s-data': tab.key === 'attr', | |||
'el-icon-folder-opened': tab.key === 'attachment', | |||
}"></i> | |||
{{ tab.name }} | |||
</span> | |||
<!-- 表单标签页 --> | |||
<div v-if="tab.key === 'info'" key="tech-info"> | |||
<!-- form --> | |||
<el-form ref="dataForm" :model="dataForm" v-loading="loading"> | |||
<el-row :gutter="20"> | |||
<el-col> | |||
<el-form-item label="工艺编码" prop="code" :rules="rules.code"> | |||
<el-input v-model="dataForm.code" clearable disabled /> | |||
</el-form-item> | |||
</el-col> | |||
<el-col> | |||
<el-form-item label="备注" prop="remark" :rules="rules.remark"> | |||
<el-input v-model="dataForm.remark" clearable disabled /> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</div> | |||
<!-- 表格标签页 --> | |||
<div v-if="tab.key === 'attr'" key="attr-list"> | |||
<BaseListTable | |||
:table-config="null" | |||
:column-config="techTableProps" | |||
:table-data="dataList" | |||
@operate-event="handleOperate" | |||
:current-page="page" | |||
:current-size="size" | |||
:refresh-layout-key="Math.random()" | |||
v-loading="loading" /> | |||
<el-pagination | |||
style="text-align: left" | |||
background | |||
@size-change="handleSizeChange" | |||
@current-change="handlePageChange" | |||
:current-page.sync="page" | |||
:page-sizes="[10, 20, 50]" | |||
:page-size="size" | |||
:total="total" | |||
layout="total, sizes, prev, next"></el-pagination> | |||
</div> | |||
</el-tab-pane> | |||
</el-tabs> | |||
</div> | |||
<!-- sub dialog --> | |||
<!-- <small-dialog | |||
:append-to-body="true" | |||
v-if="showSubDialog" | |||
ref="subDialog" | |||
:url="urls.subase" | |||
:configs="configs.subDialog" | |||
:related-id="dataForm.id" | |||
@refreshDataList="getSubList"></small-dialog> --> | |||
<!-- footer --> | |||
<div slot="footer"> | |||
<el-button @click="handleBtnClick('取消')">取消</el-button> | |||
</div> | |||
</el-dialog> | |||
</template> | |||
<script> | |||
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent"; | |||
import BaseListTable from "@/components/BaseListTable.vue"; | |||
export default { | |||
name: "BomTechAndFiringDetail", | |||
components: { BaseListTable }, | |||
props: {}, | |||
data() { | |||
return { | |||
dialogVisible: false, | |||
activeMenu: "烧成曲线", | |||
actualMenus: [ | |||
{ name: "烧成曲线", key: "info" }, | |||
{ name: "工艺参数", key: "attr", onlyEditMode: true }, | |||
], | |||
dataForm: { | |||
code: "", | |||
remark: "", | |||
}, | |||
rules: { | |||
code: [], | |||
remark: [], | |||
}, | |||
loading: false, | |||
page: 1, | |||
size: 20, | |||
total: 0, | |||
dataList: [], | |||
techTableProps: [ | |||
{ prop: "name", label: "参数名称" }, | |||
{ prop: "code", label: "参数编码" }, | |||
{ width: 80, prop: "value", label: "参数值" }, | |||
{ prop: "description", label: "描述" }, | |||
// { | |||
// prop: "operations", | |||
// name: "操作", | |||
// fixed: "right", | |||
// width: 90, | |||
// subcomponent: TableOperaionComponent, | |||
// options: [ | |||
// { name: "edit", label: "编辑", icon: "edit-outline", permission: "" }, | |||
// // { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "pms:blenderStepParam:delete" }, | |||
// ], | |||
// }, | |||
], | |||
}; | |||
}, | |||
computed: {}, | |||
mounted() {}, | |||
methods: { | |||
async init(techId) { | |||
this.techId = techId; | |||
this.dialogVisible = true; | |||
this.loading = true; | |||
await this.getTechDetailInfo(); | |||
await this.getTechDetailList(); | |||
this.loading = false; | |||
}, | |||
async getTechDetailInfo() { | |||
console.log("[getTechDetailInfo] this.techId: ", this.techId); | |||
// 填充 dataForm | |||
try { | |||
const { data: res } = await this.$http.get(`/pms/equipmentTech/${this.techId}`); | |||
if (res.code == 0) { | |||
// console.log('[getTechDetailInfo] res.data: ', res.data) | |||
// return; | |||
this.$set(this.dataForm, "code", res.data.code); | |||
this.$set(this.dataForm, "remark", res.data.remark); | |||
} | |||
} catch (err) { | |||
this.$message.error(err); | |||
} | |||
}, | |||
async getTechDetailList(params) { | |||
// 填充 dataList | |||
params = params | |||
? { ...params, page: this.page, limit: this.size } | |||
: { key: "", techId: this.techId, page: this.page, limit: this.size }; | |||
try { | |||
const { data: res } = await this.$http.get("/pms/equipmentTechParam/page", { params }); | |||
if (res.code == 0) { | |||
console.log("[getTechDetailList] res.data: ", res.data); | |||
this.dataList = res.data.list; | |||
this.total = res.data.total; | |||
} | |||
} catch (err) { | |||
this.$message.error(err); | |||
} | |||
}, | |||
handleTabClick(v) { | |||
// console.log("handleTabClick: ", v); | |||
}, | |||
handleOperate() {}, | |||
/** 导航器的操作 */ | |||
handleSizeChange(val) { | |||
// val 是新值 | |||
this.page = 1; | |||
this.size = val; | |||
this.getTechDetailList(); | |||
}, | |||
handlePageChange(val) { | |||
// val 是新值 | |||
this.getTechDetailList(); | |||
}, | |||
handleBtnClick(type) { | |||
if (type == "取消") { | |||
this.handleClose(); | |||
} | |||
}, | |||
handleClose(refresh = false) { | |||
this.dialogVisible = false; | |||
setTimeout(() => { | |||
this.$emit("destroy", refresh); | |||
}, 500); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.el-menu { | |||
margin: 16px 0 !important; | |||
} | |||
.el-menu.el-menu--horizontal { | |||
border: none !important; | |||
/* background: #0f02 !important; */ | |||
} | |||
/* .el-menu--horizontal > .el-menu-item.is-active { */ | |||
/* border-bottom-color: #0b58ff; */ | |||
/* } */ | |||
.dialog-with-menu >>> .el-dialog__body { | |||
/* padding-top: 16px !important; | |||
padding-bottom: 16px !important; */ | |||
padding-top: 0 !important; | |||
padding-bottom: 0 !important; | |||
} | |||
.el-select, | |||
.el-cascader { | |||
width: 100% !important; | |||
} | |||
.dialog-with-menu >>> .el-dialog__header { | |||
padding: 10px 20px 10px; | |||
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */ | |||
} | |||
.relative { | |||
position: relative; | |||
} | |||
.at-right-top { | |||
position: absolute; | |||
top: 0; | |||
right: 0; | |||
z-index: 10000; | |||
} | |||
ul.file-list, | |||
ul.file-list > li { | |||
padding: 0; | |||
margin: 0; | |||
list-style: none; | |||
} | |||
.file-list { | |||
max-height: 20vh; | |||
overflow-y: auto; | |||
margin-top: 12px; | |||
/* width: 240px; */ | |||
display: flex; | |||
flex-direction: column; | |||
} | |||
ul.file-list > li { | |||
border-radius: 4px; | |||
background-color: #edededd2; | |||
padding: 8px; | |||
margin-bottom: 2px; | |||
display: flex; | |||
justify-content: space-between; | |||
} | |||
ul.file-list > li:hover { | |||
background-color: #ededed; | |||
} | |||
.file-operations { | |||
display: flex; | |||
} | |||
.file-icon { | |||
margin-right: 8px; | |||
font-size: 16px; | |||
line-height: 1; | |||
display: flex; | |||
place-content: center; | |||
width: 16px; | |||
height: 16px; | |||
} | |||
/* .image-preview-dialog { | |||
} */ | |||
.force-disabled { | |||
margin-top: 42px; | |||
} | |||
</style> |
@@ -0,0 +1,173 @@ | |||
<!-- | |||
filename: edit.vue | |||
author: liubin | |||
date: 2023-07-19 09:00:04 | |||
description: | |||
--> | |||
<template> | |||
<el-dialog | |||
class="dialog-just-form" | |||
:visible="dialogVisible" | |||
@close="handleClose" | |||
:destroy-on-close="false" | |||
:close-on-click-modal="false" | |||
width="'50%'"> | |||
<!-- title --> | |||
<div slot="title" class="dialog-title"> | |||
<h1 class="">编辑</h1> | |||
</div> | |||
<!-- form --> | |||
<el-form ref="dataForm" :model="dataForm" v-loading="loading"> | |||
<el-row :gutter="20"> | |||
<el-col> | |||
<el-form-item label="bom" prop="bomId" :rules="rules.bom"> | |||
<el-input v-model="dataForm.bomId" clearable disabled></el-input> | |||
</el-form-item> | |||
</el-col> | |||
<el-col> | |||
<el-form-item label="工艺" prop="techId" :rules="rules.tech"> | |||
<el-select v-model="dataForm.techId" filterable clearable> | |||
<el-option | |||
v-for="(tech, index) in techList" | |||
:key="index" | |||
:label="tech.label" | |||
:value="tech.value"></el-option> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
<!-- footer --> | |||
<div slot="footer"> | |||
<!-- <el-button @click="handleBtnClick('保存')">保存</el-button> --> | |||
<el-button type="primary" @click="handleBtnClick('更新')">更新</el-button> | |||
<el-button @click="handleBtnClick('取消')">取消</el-button> | |||
</div> | |||
</el-dialog> | |||
</template> | |||
<script> | |||
export default { | |||
name: "BomTechAndFiringEdit", | |||
components: {}, | |||
props: {}, | |||
data() { | |||
return { | |||
dialogVisible: false, | |||
loading: false, | |||
dataForm: { | |||
id: null, | |||
bomId: null, | |||
techId: null, | |||
}, | |||
rules: { | |||
bom: [], | |||
tech: [{ required: true, message: "必填项不能为空", trigger: "blur" }], | |||
}, | |||
techList: [], | |||
}; | |||
}, | |||
computed: {}, | |||
mounted() { | |||
this.getTechList().then(() => { | |||
this.dialogVisible = true; | |||
}); | |||
}, | |||
methods: { | |||
// 初始化 | |||
init({ id, bomId, techId }) { | |||
this.$set(this.dataForm, "id", id); | |||
this.$set(this.dataForm, "bomId", bomId); | |||
this.$set(this.dataForm, "techId", techId); | |||
}, | |||
// 获取工艺列表 | |||
async getTechList() { | |||
const { data: res } = await this.$http.post("/pms/equipmentTech/pageView", { | |||
wsId: 3, | |||
bom: "", | |||
key: "", | |||
limit: 999, | |||
page: 1, | |||
}); | |||
if (res.code == 0) { | |||
console.log("res", res); | |||
this.techList = res.data.list.map((item) => { | |||
return { | |||
label: item.code, | |||
value: item.id, | |||
}; | |||
}); | |||
} | |||
}, | |||
// 提交更新 | |||
async push(type = "add") { | |||
if (type == "add") { | |||
} else if (type == "update") { | |||
} | |||
}, | |||
// 按钮事件 | |||
handleBtnClick(type) { | |||
switch (type) { | |||
// case "保存": | |||
// this.$refs.dataForm.validate((valid) => { | |||
// if (valid) { | |||
// this.$emit("emit-data", { type: "保存", data: this.dataForm }); | |||
// } | |||
// }); | |||
// break; | |||
case "更新": | |||
this.$refs.dataForm.validate((valid) => { | |||
if (valid) { | |||
this.$http.put("/pms/bomTech", this.dataForm).then((res) => { | |||
if (res.data.code == 0) { | |||
this.$message.success("更新成功"); | |||
this.handleClose(true); | |||
} else { | |||
this.$message.error(res.data.msg); | |||
} | |||
}); | |||
} | |||
}); | |||
break; | |||
case "取消": | |||
this.handleClose(); | |||
break; | |||
default: | |||
break; | |||
} | |||
}, | |||
handleClose(refresh = false) { | |||
this.dialogVisible = false; | |||
setTimeout(() => { | |||
this.$emit("destroy", refresh); | |||
}, 500); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped> | |||
.dialog-just-form >>> .el-dialog__body { | |||
/* padding-top: 16px !important; | |||
padding-bottom: 16px !important; */ | |||
padding-top: 0 !important; | |||
padding-bottom: 0 !important; | |||
} | |||
.el-select, | |||
.el-cascader, | |||
.el-date-editor { | |||
width: 100% !important; | |||
} | |||
.dialog-just-form >>> .el-dialog__header { | |||
padding: 10px 20px 10px; | |||
/* background: linear-gradient(to bottom, rgba(0, 0, 0, 0.25), white); */ | |||
} | |||
</style> |
@@ -10,7 +10,7 @@ export default function () { | |||
{ prop: "name", label: "牌号" }, | |||
// { prop: "createTime", label: "添加时间", filter: timeFilter }, | |||
{ prop: "techCode", label: "烧制曲线" }, | |||
{ prop: "description", label: "详情", subcomponent: TableTextComponent }, | |||
{ prop: "description", label: "详情", subcomponent: TableTextComponent, emitFullData: true }, | |||
// { prop: "remark", label: "备注" }, | |||
{ | |||
prop: "operations", | |||
@@ -19,7 +19,7 @@ export default function () { | |||
width: 90, | |||
subcomponent: TableOperaionComponent, | |||
options: [ | |||
{ name: "edit", label: "编辑", icon: "edit-outline" }, | |||
{ name: "edit", label: "编辑", icon: "edit-outline", emitFull: true }, | |||
// { name: "copy", label: "复制", icon: "copy-document" }, | |||
// { name: "delete", icon: "delete", label: "删除", emitFull: true, permission: "" }, | |||
], | |||
@@ -1,24 +1,48 @@ | |||
<template> | |||
<ListViewWithHead | |||
<!-- <ListViewWithHead | |||
:table-config="tableConfig" | |||
:head-config="headFormConfigs" | |||
:dialog-configs="dialogConfigs" | |||
:list-query-extra="['key', 'tech']" /> | |||
:list-query-extra="['key', 'tech']" /> --> | |||
<!-- :list-query-extra="['key', 'bom', { wsId: 3 }]" --> | |||
<div class="list-view-with-head" ref="pointer-loading-ref"> | |||
<BaseSearchForm :head-config="headFormConfigs" @btn-click="handleBtnClick" /> | |||
<BaseListTable | |||
v-loading="tableLoading" | |||
:table-config="tableConfig.table" | |||
:column-config="tableConfig.column" | |||
:table-data="dataList" | |||
@operate-event="handleOperate" | |||
:current-page="page" | |||
:current-size="size" | |||
:refresh-layout-key="refreshLayoutKey" /> | |||
<el-pagination | |||
class="mt-5 flex justify-end" | |||
@size-change="handleSizeChange" | |||
@current-change="handlePageChange" | |||
:current-page.sync="page" | |||
:page-size.sync="size" | |||
:page-sizes="[10, 20, 50, 100]" | |||
:total="totalPage" | |||
layout="total, sizes, prev, pager, next, jumper"></el-pagination> | |||
<edit ref="edit" v-if="editVisible" @destroy="handleDestroy('edit', $event)" /> | |||
<detail ref="detail" v-if="detailVisible" @destroy="handleDestroy('detail')" /> | |||
</div> | |||
</template> | |||
<script> | |||
import initConfig from "./config"; | |||
import ListViewWithHead from "@/views/atomViews/ListViewWithHead.vue"; | |||
import BaseListTable from "@/components/BaseListTable.vue"; | |||
import BaseSearchForm from "@/components/BaseSearchForm.vue"; | |||
import edit from "./components/edit.vue"; | |||
import detail from "./components/detail.vue"; | |||
export default { | |||
name: "BomTechAndFiringView", | |||
components: { ListViewWithHead }, | |||
provide() { | |||
return { | |||
urls: this.allUrls, | |||
}; | |||
}, | |||
components: { BaseListTable, BaseSearchForm, edit, detail }, | |||
data() { | |||
const { tableConfig, headFormConfigs, urls, dialogConfigs } = initConfig.call(this); | |||
return { | |||
@@ -26,12 +50,201 @@ export default { | |||
headFormConfigs, | |||
allUrls: urls, | |||
dialogConfigs, | |||
dataList: [], | |||
page: 1, | |||
size: 20, | |||
totalPage: 0, | |||
urls, | |||
tableLoading: false, | |||
refreshLayoutKey: null, | |||
editVisible: false, | |||
detailVisible: false, | |||
}; | |||
}, | |||
created() {}, | |||
mounted() {}, | |||
methods: {}, | |||
mounted() { | |||
// 更新页面默认 size | |||
const size = "defaultPageSize" in this.tableConfig.column ? this.tableConfig.column.defaultPageSize : 20; | |||
this.size = size; | |||
this.getList(); | |||
// this.initDataWhenLoad && this.getList(); | |||
}, | |||
activated() { | |||
this.refreshLayoutKey = this.layoutTable(); | |||
}, | |||
methods: { | |||
/** 获取 列表数据 */ | |||
getList(queryParams) { | |||
this.tableLoading = true; | |||
const params = queryParams | |||
? { ...queryParams, page: this.page, limit: this.size } | |||
: { | |||
page: this.page, | |||
limit: this.size, | |||
key: "", | |||
tech: "", | |||
}; | |||
this.$http | |||
.get(this.urls.page, { | |||
params, | |||
}) | |||
.then(({ data: res }) => { | |||
console.log("[http response] res is: ", res); | |||
if (res.code === 0) { | |||
if ("list" in res.data) { | |||
this.dataList = res.data.list; | |||
this.totalPage = res.data.total; | |||
} else if (Array.isArray(res.data)) { | |||
this.dataList = res.data; | |||
} else { | |||
this.dataList.splice(0); | |||
this.totalPage = 0; | |||
} | |||
} else { | |||
this.$message({ | |||
message: `${res.code}: ${res.msg}`, | |||
type: "error", | |||
duration: 2000, | |||
}); | |||
} | |||
this.tableLoading = false; | |||
}) | |||
.catch((err) => { | |||
this.$message({ | |||
message: `${err}`, | |||
type: "error", | |||
duration: 2000, | |||
}); | |||
this.tableLoading = false; | |||
}); | |||
}, | |||
layoutTable() { | |||
return Math.random(); | |||
}, | |||
handleBtnClick({ btnName, payload }) { | |||
console.log("[search] form handleBtnClick", btnName, payload); | |||
switch (btnName) { | |||
case "查询": | |||
this.getList({ ...payload }); | |||
break; | |||
} | |||
}, | |||
handleDestroy(type, refresh) { | |||
console.log("[handleDestroy] ", type); | |||
switch (type) { | |||
case "edit": | |||
this.editVisible = false; | |||
if (refresh) { | |||
this.getList(); | |||
} | |||
break; | |||
case "detail": | |||
this.detailVisible = false; | |||
break; | |||
} | |||
}, | |||
handleOperate({ type, data }) { | |||
console.log("payload", type, data); | |||
switch (type) { | |||
case "delete": { | |||
// 找到删除的 prompt 字段 | |||
const deleteConfig = data.head?.options?.find((item) => item.name === "delete"); | |||
let promptName = data.name ?? data.id; | |||
if (deleteConfig && "promptField" in deleteConfig) { | |||
promptName = data[deleteConfig.promptField]; | |||
} | |||
let hintMsg = `确定要删除记录 "${promptName}" 吗?`; | |||
if (promptName == data.id) { | |||
// 如果 promptName 计算出来是 data.id 就以'该记录'代称 | |||
hintMsg = "确定删除该记录?"; | |||
} | |||
let currenPageListLength = this.dataList.length; | |||
// 确认是否删除 | |||
return this.$confirm(hintMsg, "提示", { | |||
confirmButtonText: "确认", | |||
cancelButtonText: "我再想想", | |||
type: "warning", | |||
}) | |||
.then(() => { | |||
this.$http({ | |||
url: this.urls.base, | |||
method: "DELETE", | |||
data: [`${data.id}`], | |||
}).then(({ data: res }) => { | |||
if (res.code === 0) { | |||
this.$message.success("删除成功!"); | |||
if (currenPageListLength == 1) this.page = this.page > 1 ? this.page - 1 : 1; | |||
this.getList(); | |||
} else { | |||
this.$message({ | |||
message: `${res.code}: ${res.msg}`, | |||
type: "error", | |||
duration: 1500, | |||
}); | |||
} | |||
}); | |||
}) | |||
.catch((err) => {}); | |||
} | |||
case "edit": { | |||
console.log("[edit] ", data); | |||
this.editVisible = true; | |||
this.$nextTick(() => { | |||
this.$refs.edit.init({ | |||
id: data.bomTechId, | |||
bomId: data.id, | |||
techId: data.techId, | |||
}); | |||
}); | |||
break; | |||
} | |||
case "view-detail-action": { | |||
console.log("[detail] ", data, data.techId); | |||
if (!data || !data.techId) { | |||
this.$message.warning("暂无详请可供查看"); | |||
return; | |||
} | |||
this.detailVisible = true; | |||
this.$nextTick(() => { | |||
this.$refs.detail.init(data.techId); | |||
}); | |||
break; | |||
} | |||
} | |||
}, | |||
handleSizeChange(val) { | |||
// val 是新值 | |||
this.page = 1; | |||
this.size = val; | |||
this.getList(this.cachedSearchCondition); | |||
}, | |||
handlePageChange(val) { | |||
// val 是新值 | |||
this.getList(this.cachedSearchCondition); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped></style> | |||
<style scoped> | |||
.list-view-with-head { | |||
background: white; | |||
/* height: 100%; */ | |||
min-height: inherit; | |||
border-radius: 6px; | |||
padding: 16px; | |||
box-shadow: 0 0 1.125px 0.125px rgba(0, 0, 0, 0.125); | |||
} | |||
</style> |