add DialogJustForm & update factory, productLine

This commit is contained in:
lb 2023-01-29 15:27:38 +08:00
parent f8f07e00ad
commit a4698d207d
9 changed files with 638 additions and 437 deletions

3
.prettierrc Normal file
View File

@ -0,0 +1,3 @@
{
"printWidth": 150
}

View File

@ -8,17 +8,17 @@
:key="opt.prop"
:label="opt.label ? opt.label : null"
:prop="'' + index"
:rules="opt.elconfig?.rules ? opt.elconfig.rules : undefined"
:rules="opt.bind?.rules ? opt.bind.rules : undefined"
>
<el-input
v-if="opt.input"
v-model="searchForm[index]"
v-bind="opt.elconfig"
v-bind="opt.bind"
/>
<el-select
v-if="opt.select"
v-model="searchForm[index]"
v-bind="opt.elconfig"
v-bind="opt.bind"
>
<el-option
v-for="item in opt.select"
@ -30,7 +30,7 @@
<el-date-picker
v-if="opt.timerange"
v-model="searchForm[index]"
v-bind="opt.elconfig"
v-bind="opt.bind"
/>
<el-upload
v-if="opt.upload"

View File

@ -0,0 +1,290 @@
<template>
<el-dialog
class="dialog-just-form"
:visible.sync="selfVisible"
@closed="resetForm"
:distory-on-close="true"
>
<!-- title -->
<div slot="title" class="dialog-title">
<h1 class="">
{{ detailMode ? "查看详情" : dataForm.id ? "编辑" : "新增" }}
</h1>
</div>
<!-- form -->
<el-form ref="dataForm" :model="dataForm" v-loading="loadingStatus">
<el-row
v-for="(row, rowIndex) in configs.form.rows"
:key="'row_' + rowIndex"
:gutter="20"
>
<el-col
v-for="(col, colIndex) in row"
:key="colIndex"
:span="24 / row.length"
>
<!-- 通过多个 col === null 可以控制更灵活的 span 大小 -->
<el-form-item
v-if="col !== null"
:label="col.label"
:prop="col.prop"
:rules="col.rules || null"
>
<el-input
v-if="col.input"
v-model="dataForm[col.prop]"
clearable
:disabled="detailMode"
v-bind="col.elparams"
/>
<el-select
v-if="col.select"
v-model="dataForm[col.prop]"
clearable
:disabled="detailMode"
v-bind="col.elparams"
@change="handleSelectChange(col, $event)"
>
<el-option
v-for="(opt, optIdx) in col.options"
:key="'option_' + optIdx"
:label="opt.label"
:value="opt.value"
/>
</el-select>
<el-switch
v-if="col.switch"
v-model="dataForm[col.prop]"
:active-value="col.activeValue ?? 1"
:inactive-value="col.activeValue ?? 0"
@change="handleSwitchChange"
:disabled="detailMode"
/>
<el-input
v-if="col.textarea"
type="textarea"
v-model="dataForm[col.prop]"
:disabled="detailMode"
v-bind="col.elparams"
/>
<!-- add more... -->
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- footer -->
<div slot="footer">
<template v-for="(operate, index) in configs.form.operations">
<el-button
v-if="showButton(operate)"
:key="'operation_' + index"
:type="operate.type"
@click="handleBtnClick(operate)"
>{{ operate.label }}</el-button
>
</template>
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
</div>
</el-dialog>
</template>
<script>
import { pick as __pick } from "@/utils/filters";
export default {
name: "DialogJustForm",
props: {
configs: {
type: Object,
default: () => ({}),
},
},
inject: ["urls"],
data() {
const dataForm = {};
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
dataForm[col.prop] = col.default ?? null;
col.fetchData &&
col.fetchData().then(({ data: res }) => {
console.log("[Fetch Data]", res.data.list);
if (res.code === 0 && res.data.list) {
this.$set(
col,
"options",
res.data.list.map((i) => ({ label: i.name, value: i.id }))
);
// col.options = res.data.list;
} else {
col.options.splice(0);
}
// dataForm[col.prop] = col.default ?? null; // not perfect!
});
});
});
return {
loadingStatus: false,
dataForm,
detailMode: false,
selfVisible: false,
baseDialogConfig: null,
};
},
created() {
// console.log('[dialog] created!!! wouldn\'t create again...')
},
methods: {
/** utitilities */
showButton(operate) {
const notDetailMode = !this.detailMode;
const showAlways = operate.showAlways ?? false;
const editMode = operate.showOnEdit && this.dataForm.id;
const addMode = !operate.showOnEdit && !this.dataForm.id;
const permission = operate.permission
? this.$hasPermission(operate.permission)
: true;
return (
notDetailMode && (showAlways || ((editMode || addMode) && permission))
);
},
resetForm(excludeId = false, immediate = false) {
setTimeout(
() => {
console.log("[Dialog Just Form] clearing form...");
Object.keys(this.dataForm).forEach((key) => {
if (excludeId && key === "id") return;
this.dataForm[key] = null;
});
this.$refs.dataForm.clearValidate();
},
immediate ? 0 : 100
);
},
/** init **/
init(id, detailMode) {
this.selfVisible = true;
if (this.$refs.dataForm) {
console.log("[dialog REUSE] clearing form validation...");
// dialog dataForm [0]
this.$refs.dataForm.clearValidate();
}
console.log("[Dialog Just Form] init():", id, detailMode);
this.detailMode = detailMode ?? false;
this.$nextTick(() => {
this.dataForm.id = id || null;
if (this.dataForm.id) {
//
this.loadingStatus = true;
this.$http
.get(this.urls.base + `/${this.dataForm.id}`)
.then(({ data: res }) => {
if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm);
console.log("keys ===> ", dataFormKeys);
// console.log('data form keys: ', dataFormKeys, pick(res.data, dataFormKeys))
this.dataForm = __pick(res.data, dataFormKeys);
console.log(
"pick(res.data, dataFormKeys) ===> ",
__pick(res.data, dataFormKeys)
);
}
this.loadingStatus = false;
});
} else {
//
this.selfVisible = true;
}
});
},
/** handlers */
handleSelectChange(col, eventValue) {
// console.log("[dialog] select change: ", col, eventValue);
this.$forceUpdate();
},
handleSwitchChange(val) {
console.log("[dialog] switch change: ", val, this.dataForm);
},
handleBtnClick(payload) {
console.log("btn click payload: ", payload);
if ("name" in payload) {
switch (payload.name) {
case "cancel":
this.handleClose();
break;
case "reset":
this.resetForm(true, true); // true means exclude id, immediate execution
break;
case "add":
case "update": {
this.$refs.dataForm.validate((passed, result) => {
if (passed) {
//
this.loadingStatus = true;
const method = payload.name === "add" ? "POST" : "PUT";
this.$http({
url: this.urls.base,
method,
data: this.dataForm,
})
.then(({ data: res }) => {
console.log("[add&update] res is: ", res);
if (res.code === 0) {
this.$message.success(
payload.name === "add" ? "添加成功" : "更新成功"
);
this.$emit("refreshDataList");
this.loadingStatus = false;
this.handleClose();
}
})
.catch((errMsg) => {
this.$message.error("参数错误:" + errMsg);
if (this.loadingStatus) this.loadingStatus = false
});
} else {
//
// this.$message.error(JSON.stringify(result));
this.$message.error("请核查字段信息");
}
});
}
}
} else {
console.log("[x] 不是这么用的! 缺少name属性");
}
},
handleClose() {
// this.resetForm();
this.selfVisible = false;
},
},
};
</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 {
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>

View File

@ -36,6 +36,7 @@ export default {
delete: '删除',
viewAttr: '查看属性',
preview: '预览',
view: '查看',
design: '设计',
'view-trend': '查看趋势'
// add more...

View File

@ -58,8 +58,8 @@ http.interceptors.response.use(response => {
}
return response
}, error => {
console.error(error)
return Promise.reject(error)
console.error('[response interceptor]: ', error)
return Promise.reject(error.message)
})
export default http

View File

@ -1,240 +1,249 @@
<!-- 表格页加上搜索条件 -->
<template>
<div
class="list-view-with-head"
>
<!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
<BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
<div class="list-view-with-head">
<!-- <head-form :form-config="headFormConfig" @headBtnClick="btnClick" /> -->
<BaseSearchForm :head-config="headConfig" @btn-click="handleBtnClick" />
<BaseListTable
:table-config="tableConfig.table"
:column-config="tableConfig.column"
:table-data="dataList"
@operate-event="handleOperate"
/>
<BaseListTable
v-loading="tableLoading"
:table-config="tableConfig.table"
:column-config="tableConfig.column"
:table-data="dataList"
@operate-event="handleOperate"
/>
<el-pagination
class="mt-5 flex justify-end"
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page.sync="page"
:page-sizes="[1, 5, 10, 20, 50, 100]"
:page-size="size"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
<!-- :current-page.sync="currentPage"
<el-pagination
class="mt-5 flex justify-end"
@size-change="handleSizeChange"
@current-change="handlePageChange"
:current-page.sync="page"
:page-sizes="[1, 5, 10, 20, 50, 100]"
:page-size="size"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
<!-- :current-page.sync="currentPage"
:page-size.sync="pageSize" -->
<base-dialog
ref="edit-dialog"
v-if="dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList"
/>
</div>
<DialogWithMenu ref="edit-dialog" v-if="dialogType === DIALOG_WITH_MENU && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
<DialogJustForm ref="edit-dialog" v-if="dialogType === DIALOG_JUST_FORM && dialogVisible" :configs="dialogConfigs" @refreshDataList="getList" />
</div>
</template>
<script>
import BaseListTable from "@/components/BaseListTable.vue";
import BaseSearchForm from "@/components/BaseSearchForm.vue";
import BaseDialog from "@/components/DialogWithMenu.vue";
import DialogWithMenu from "@/components/DialogWithMenu.vue";
import DialogJustForm from "@/components/DialogJustForm.vue";
const DIALOG_WITH_MENU = "DialogWithMenu";
const DIALOG_JUST_FORM = "DialogJustForm";
export default {
name: "ListViewWithHead",
components: { BaseSearchForm, BaseListTable, BaseDialog },
props: {
tableConfig: {
type: Object,
default: () => ({
/** 列配置, 即 props **/ columnConfig: [],
/** 表格整体配置 */ tableConfig: undefined,
}),
},
headConfig: {
type: Object,
default: () => ({}),
},
/** 请求page接口的时候有些字段是必填的没有会报500把相关字段名传入这个prop: */
listQueryExtra: {
type: Array,
default: () => ["key"],
},
initDataWhenLoad: { type: Boolean, default: true },
/** dialog configs 或许可以从 tableConfig 计算出来 computed... */
dialogConfigs: {
type: Object,
default: () => ({}),
},
},
data() {
return {
dialogVisible: false,
topBtnConfig: null,
totalPage: 100,
page: 1,
size: 20, // 20
dataList: [],
};
},
inject: ["urls"],
mounted() {
this.initDataWhenLoad && this.getList();
},
methods: {
/**
* 转换服务器数据的中间层
* 为了抹平真实服务器数据和我本地的测试服务器数据的差异
**/
prehandle_data(list) {
/** 根据具体情况修改 */
list.forEach((data) => {
data.id = data._id;
delete data._id;
});
return list;
},
name: "ListViewWithHead",
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
props: {
tableConfig: {
type: Object,
default: () => ({
/** 列配置, 即 props **/ columnConfig: [],
/** 表格整体配置 */ tableConfig: undefined,
}),
},
headConfig: {
type: Object,
default: () => ({}),
},
/** 请求page接口的时候有些字段是必填的没有会报500把相关字段名传入这个prop: */
listQueryExtra: {
type: Array,
default: () => ["key"],
},
initDataWhenLoad: { type: Boolean, default: true },
/** dialog configs 或许可以从 tableConfig 计算出来 computed... */
dialogConfigs: {
type: Object,
default: () => ({}),
},
},
computed: {
dialogType() {
return this.dialogConfigs.menu ? DIALOG_WITH_MENU : DIALOG_JUST_FORM;
},
},
data() {
return {
DIALOG_WITH_MENU,
DIALOG_JUST_FORM,
dialogVisible: false,
topBtnConfig: null,
totalPage: 100,
page: 1,
size: 20, // 20
dataList: [],
tableLoading: false,
};
},
inject: ["urls"],
mounted() {
this.initDataWhenLoad && this.getList();
},
methods: {
/**
* 转换服务器数据的中间层
* 为了抹平真实服务器数据和我本地的测试服务器数据的差异
**/
prehandle_data(list) {
/** 根据具体情况修改 */
list.forEach((data) => {
data.id = data._id;
delete data._id;
});
return list;
},
/** 获取 列表数据 */
getList(listQuery = null) {
if (!listQuery) {
listQuery = {};
listQuery.page = this.page;
listQuery.size = this.size;
}
/** 获取 列表数据 */
getList(listQuery = null) {
this.tableLoading = true;
if (!listQuery) {
listQuery = {};
listQuery.page = this.page;
listQuery.size = this.size;
}
console.log("[before http] url: ", this.urls);
const params = {
page: listQuery.page,
limit: listQuery.size,
};
if (this.listQueryExtra.length) {
this.listQueryExtra.map((name) => {
params[name] = "";
});
}
this.$http
.get(this.urls.page, {
params,
})
.then(({ data: res }) => {
console.log("[http response] res is: ", res);
const params = {
page: listQuery.page,
limit: listQuery.size,
};
if (this.listQueryExtra.length) {
this.listQueryExtra.map((name) => {
params[name] = "";
});
}
this.$http
.get(this.urls.page, {
params,
})
.then(({ data: res }) => {
console.log("[http response] res is: ", res);
// page :
if ("list" in res.data) {
// real env:
this.dataList = res.data.list.map((item) => ({
...item,
id: item._id ?? item.id,
}));
// this.dataList = res.data.records;
this.totalPage = res.data.total;
} else if ("records" in res.data) {
// dev env:
this.dataList = res.data.records.map((item) => ({
...item,
id: item._id ?? item.id,
}));
// this.dataList = res.data.records;
this.totalPage = res.data.total;
} else {
this.dataList.splice(0);
this.totalPage = 0;
}
this.tableLoading = false;
});
},
// page :
if ("list" in res.data) {
// real env:
this.dataList = res.data.list.map((item) => ({
...item,
id: item._id ?? item.id,
}));
// this.dataList = res.data.records;
this.totalPage = res.data.total;
} else if ("records" in res.data) {
// dev env:
this.dataList = res.data.records.map((item) => ({
...item,
id: item._id ?? item.id,
}));
// this.dataList = res.data.records;
this.totalPage = res.data.total;
} else {
this.dataList.splice(0);
this.totalPage = 0;
}
});
},
/** 处理 HeadForm 的操作 */
handleHeadformOperate(payload) {
//
console.log("headform operate: ", payload);
},
/** 处理 HeadForm 的操作 */
handleHeadformOperate(payload) {
//
console.log("headform operate: ", payload);
},
/** 处理 表格操作 */
handleOperate({ type, data }) {
console.log("payload", type, data);
// component url
// payload: { type: string, data: string | number | object }
switch (type) {
case "delete": {
//
return this.$confirm(`是否删除条目: ${data}`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "我再想想",
type: "warning",
})
.then(() => {
// this.$http.delete(this.urls.base + `/${data}`).then((res) => {
this.$http({
url: this.urls.base,
method: "DELETE",
data: [`${data}`],
}).then(({ data: res }) => {
if (res.code === 0) {
this.$message.success("删除成功!");
/** 处理 表格操作 */
handleOperate({ type, data }) {
console.log("payload", type, data);
// component url
// payload: { type: string, data: string | number | object }
switch (type) {
case "delete": {
//
return this.$confirm(`是否删除条目: ${data}`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "我再想想",
type: "warning",
})
.then(() => {
// this.$http.delete(this.urls.base + `/${data}`).then((res) => {
this.$http({
url: this.urls.base,
method: "DELETE",
data: [`${data}`],
}).then(({ data: res }) => {
if (res.code === 0) {
this.$message.success("删除成功!");
this.page = 1;
this.size = 10;
this.getList();
}
});
})
.catch((err) => {});
}
case "edit": {
this.openDialog(data); /** data is ==> id */
break;
}
case "view":
case "view-detail-action": {
this.openDialog(data, true);
break;
}
}
},
this.page = 1;
this.size = 10;
this.getList();
}
});
})
.catch((err) => {});
}
case "edit": {
this.openDialog(data); /** data is ==> id */
break;
}
case "view-detail-action":
this.openDialog(data, true);
break;
}
},
handleBtnClick({ btnName, payload }) {
console.log("[search] form handleBtnClick", btnName, payload);
switch (btnName) {
case "新增":
this.openDialog();
break;
case "查询":
break;
}
},
handleBtnClick({ btnName, payload }) {
console.log("[search] form handleBtnClick", btnName, payload);
switch (btnName) {
case "新增":
this.openDialog();
break;
case "查询":
break;
}
},
/** 导航器的操作 */
handleSizeChange(val) {
// val
this.page = 1;
this.size = val;
this.getList();
},
/** 导航器的操作 */
handleSizeChange(val) {
// val
this.page = 1;
this.size = val;
this.getList();
},
handlePageChange(val) {
// val
this.getList();
},
handlePageChange(val) {
// val
this.getList();
},
/** 打开对话框 */
openDialog(row_id, detail_mode) {
this.dialogVisible = true;
/** 打开对话框 */
openDialog(row_id, detail_mode) {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode);
});
},
},
this.$nextTick(() => {
this.$refs["edit-dialog"].init(/** some args... */ row_id, detail_mode);
});
},
},
};
</script>
<style scoped>
.list-view-with-head {
background: white;
/* height: 100%; */
min-height: inherit;
border-radius: 6px;
padding: 16px;
box-shadow: 0 0 1.125px .125px rgba(0, 0, 0, 0.125);
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>

View File

@ -10,22 +10,26 @@ export default function () {
{ prop: 'code', label: '工厂编码' },
{ prop: 'address', label: '地址' },
{ prop: 'description', label: '描述' },
// {
// prop: 'operations',
// name: '操作',
// fixed: 'right',
// width: 120,
// subcomponent: TableOperaionComponent,
// options: ['edit', { name: 'delete', permission: 'pms:blenderStep:delete' }]
// }
{
prop: 'operations',
name: '操作',
fixed: 'right',
width: 120,
subcomponent: TableOperaionComponent,
// options: ['edit', { name: 'delete', permission: 'pms:blenderStep:delete' }]
options: ['view']
}
]
const headFormFields = [
{
label: '名称',
label: '工厂名称',
input: true,
default: { value: '' }
default: { value: '' },
bind: {
placeholder: '请输入工厂名称'
}
},
{
button: {
@ -42,97 +46,35 @@ export default function () {
// }
]
const dialogConfigs = {
menu: [{ name: '混料程序' }, { name: '参数明细', onlyEditMode: true }],
/**
* dialog config 有两个版本一个适用于 DialogWithMenu 组件另一个适用于 DialogJustForm 组件
* 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
* 此为后者的配置:
*/
const dialogJustFormConfigs = {
form: {
url: '/pms/blenderStep',
rows: [
[
{ input: true, label: '混料程序名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序名称' } },
{ input: true, label: '程序编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序编码' } },
{ input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
{ input: true, label: '工厂名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入工厂名称' } },
{ input: true, label: '工厂编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入工厂编码' } },
],
[
// {
// select: true,
// label: '城市',
// prop: 'city',
// options: [
// { label: '1', value: 1 },
// { label: '2', value: 2 },
// { label: '3', value: 3 },
// ],
// elparams: { placeholder: '请选择城市' }
// },
// { input: true, label: '程序号', prop: '', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序号' } },
{ input: true, label: '地址', prop: 'address', elparams: { placeholder: '' } }, // '请输入工厂所在地' } },
{ input: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }
],
// [{ switch: true, label: '状态', prop: 'enabled', default: 0 }],
[{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
],
operations: [
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStep:save', showOnEdit: false },
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStep:update', showOnEdit: true },
{ name: 'reset', label: '重置', type: 'warning', showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
table: {
// extraParams: ['stepId'],
extraParams: 'stepId',
props: [
{ prop: 'sort', label: '步骤', isEditField: true },
{ prop: 'name', label: '参数名称', isEditField: true },
{ prop: 'description', label: '描述', isEditField: true },
{ prop: 'value', label: '设定值', isEditField: true },
{ prop: 'valueFloor', label: '值下限', isEditField: true },
{ prop: 'valueTop', label: '值上限', isEditField: true },
{
prop: 'operations',
name: '操作',
fixed: 'right',
width: 120,
subcomponent: TableOperaionComponent,
options: [
{ name: 'edit', permission: 'pms:blenderStepParam:update' },
{ name: 'delete', permission: 'pms:blenderStepParam:delete' },
]
}
],
data: [
// TOOD 暂时用不到,但获取可以考虑把拉取接口数据的函数迁移到此文件(没有太大必要)
],
},
subDialog: {
extraParam: 'stepId',
rows: [
[
{ input: true, label: '步骤', prop: 'sort', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入步骤' } },
{ input: true, label: '步骤描述', prop: 'description', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
], [
{ input: true, label: '参数名称', prop: 'name', elparams: { placeholder: '请输入参数名称' } },
{ input: true, label: '参数编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
], [
{ input: true, label: '参数值上限', prop: 'valueTop', elparams: { placeholder: '请输入参数值上限' } },
{ input: true, label: '参数值下限', prop: 'valueFloor', elparams: { placeholder: '请输入参数值下限' } },
],
[
{ input: true, label: '参数值', prop: 'value', elparams: { placeholder: '请输入参数值' } },
]
],
operations: [
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStepParam:save', showOnEdit: false },
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStepParam:update', showOnEdit: true },
// { name: 'reset', label: '重置', type: 'warning', showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
// operations: [
// { name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStep:save', showOnEdit: false },
// { name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStep:update', showOnEdit: true },
// { name: 'reset', label: '重置', type: 'warning', showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
// ],
},
};
return {
dialogConfigs,
dialogConfigs: dialogJustFormConfigs,
tableConfig: {
table: null, // 此处可省略el-table 上的配置项
column: tableProps, // el-column-item 上的配置项
@ -144,9 +86,6 @@ export default function () {
urls: {
base: '/pms/factory',
page: '/pms/factory/page',
// subase: '/pms/blenderStepParam',
// subpage: '/pms/blenderStepParam/page',
// more...
}
}
}

View File

@ -50,6 +50,11 @@ export default function () {
]
/**
* dialog config 有两个版本一个适用于 DialogWithMenu 组件另一个适用于 DialogJustForm 组件
* 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
* 此为后者的配置:
*/
const dialogConfigs = {
menu: [{ name: '混料程序' }, { name: '参数明细', onlyEditMode: true }],
form: {
@ -60,21 +65,6 @@ export default function () {
{ input: true, label: '程序编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序编码' } },
{ input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
],
[
// {
// select: true,
// label: '城市',
// prop: 'city',
// options: [
// { label: '1', value: 1 },
// { label: '2', value: 2 },
// { label: '3', value: 3 },
// ],
// elparams: { placeholder: '请选择城市' }
// },
// { input: true, label: '程序号', prop: '', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序号' } },
],
// [{ switch: true, label: '状态', prop: 'enabled', default: 0 }],
[{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
],
operations: [

View File

@ -1,155 +1,124 @@
import TableOperaionComponent from '@/components/noTemplateComponents/operationComponent'
import TableTextComponent from '@/components/noTemplateComponents/detailComponent'
import StatusComponent from '@/components/noTemplateComponents/statusComponent'
import InputArea from 'code-brick-zj'
import TableOperaionComponent from "@/components/noTemplateComponents/operationComponent";
import TableTextComponent from "@/components/noTemplateComponents/detailComponent";
import StatusComponent from "@/components/noTemplateComponents/statusComponent";
import request from "@/utils/request";
export default function () {
const tableProps = [
{ prop: 'name', label: '产线名称' },
{ prop: 'code', label: '产线编码' },
{ prop: 'factory', label: '所属工厂' },
{ prop: 'status', label: '产线状态', subcomponent: StatusComponent }, // subcomponent
{ prop: 'tvalue', label: '每小时下片数量', },
{ prop: 'description', label: '描述', },
{ prop: 'remark', label: '备注' },
{ prop: "name", label: "产线名称" },
{ prop: "code", label: "产线编码" },
{ prop: "factory", label: "所属工厂" },
{ prop: "status", label: "产线状态", subcomponent: StatusComponent }, // subcomponent
{ prop: "tvalue", label: "每小时下片数量" },
{ prop: "description", label: "描述" },
{ prop: "remark", label: "备注" },
{
prop: 'operations',
name: '操作',
fixed: 'right',
prop: "operations",
name: "操作",
fixed: "right",
width: 120,
subcomponent: TableOperaionComponent,
options: ['edit', { name: 'delete', permission: '' }]
}
]
options: ["edit", { name: "delete", permission: "pms:productionLine:delete" }],
},
];
const headFormFields = [
{
label: '产线名称/编码',
label: "产线名称/编码",
input: true,
default: { value: '' }
},
{
button: {
type: 'primary',
name: '查询'
default: { value: "" },
bind: {
placeholder: '请输入产线名称或编码'
}
},
{
button: {
type: 'plain',
name: '新增',
permission: ''
}
}
]
type: "primary",
name: "查询",
},
},
{
button: {
type: "plain",
name: "新增",
permission: "",
},
},
];
const dialogConfigs = {
menu: [{ name: '混料程序' }, { name: '参数明细', onlyEditMode: true }],
/**
* dialog config 有两个版本一个适用于 DialogWithMenu 组件另一个适用于 DialogJustForm 组件
* 适用于 DialogWithMenu 组件的配置示例详见 blenderStep/config.js
* 此为后者的配置:
*/
const dialogJustFormConfigs = {
form: {
url: '/pms/blenderStep',
rows: [
[
{ input: true, label: '混料程序名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序名称' } },
{ input: true, label: '程序编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序编码' } },
{ input: true, label: '版本号', prop: 'version', elparams: { placeholder: '请输入版本号' } },
{
input: true,
label: "产线名称",
prop: "name",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入产线名称" },
},
{
input: true,
label: "产线编码",
prop: "code",
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入产线编码" },
},
],
[
// {
// select: true,
// label: '城市',
// prop: 'city',
// options: [
// { label: '1', value: 1 },
// { label: '2', value: 2 },
// { label: '3', value: 3 },
// ],
// elparams: { placeholder: '请选择城市' }
// },
// { input: true, label: '程序号', prop: '', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入混料程序号' } },
{
select: true,
label: "所属工厂",
prop: "factoryId",
fetchData: () => this.$http.get("/pms/factory/page", { params: { limit: 999, page: 1 } }),
option: [],
rules: { required: true, message: "not empty", trigger: "change" },
},
{
input: true,
label: "产线TT值",
prop: "tvalue",
rules: [
{ required: true, message: "not empty", trigger: "blur" },
{ type: "number", message: "数字", trigger: "blur", transform: (val) => Number(val) },
],
elparams: { placeholder: "设定TT值每小时下片数量" },
},
],
// [{ switch: true, label: '状态', prop: 'enabled', default: 0 }],
[{ textarea: true, label: '备注', prop: 'remark', elparams: { placeholder: '备注' } }],
[{ textarea: true, label: "描述信息", prop: "description", elparams: { placeholder: "描述信息" } }],
[{ input: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
],
operations: [
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStep:save', showOnEdit: false },
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStep:update', showOnEdit: true },
{ name: 'reset', label: '重置', type: 'warning', showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
table: {
// extraParams: ['stepId'],
extraParams: 'stepId',
props: [
{ prop: 'sort', label: '步骤', isEditField: true },
{ prop: 'name', label: '参数名称', isEditField: true },
{ prop: 'description', label: '描述', isEditField: true },
{ prop: 'value', label: '设定值', isEditField: true },
{ prop: 'valueFloor', label: '值下限', isEditField: true },
{ prop: 'valueTop', label: '值上限', isEditField: true },
{
prop: 'operations',
name: '操作',
fixed: 'right',
width: 120,
subcomponent: TableOperaionComponent,
options: [
{ name: 'edit', permission: 'pms:blenderStepParam:update' },
{ name: 'delete', permission: 'pms:blenderStepParam:delete' },
]
}
],
data: [
// TOOD 暂时用不到,但获取可以考虑把拉取接口数据的函数迁移到此文件(没有太大必要)
],
},
subDialog: {
extraParam: 'stepId',
rows: [
[
{ input: true, label: '步骤', prop: 'sort', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入步骤' } },
{ input: true, label: '步骤描述', prop: 'description', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
], [
{ input: true, label: '参数名称', prop: 'name', elparams: { placeholder: '请输入参数名称' } },
{ input: true, label: '参数编码', prop: 'code', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入描述' } },
], [
{ input: true, label: '参数值上限', prop: 'valueTop', elparams: { placeholder: '请输入参数值上限' } },
{ input: true, label: '参数值下限', prop: 'valueFloor', elparams: { placeholder: '请输入参数值下限' } },
],
[
{ input: true, label: '参数值', prop: 'value', elparams: { placeholder: '请输入参数值' } },
]
],
operations: [
{ name: 'add', label: '保存', type: 'primary', permission: 'pms:blenderStepParam:save', showOnEdit: false },
{ name: 'update', label: '更新', type: 'primary', permission: 'pms:blenderStepParam:update', showOnEdit: true },
// { name: 'reset', label: '重置', type: 'warning', showAlways: true },
{ name: "add", label: "保存", type: "primary", permission: "pms:productionLine:save", showOnEdit: false },
{ name: "update", label: "更新", type: "primary", permission: "pms:productionLine:update", showOnEdit: true },
{ name: "reset", label: "重置", type: "warning", showAlways: true },
// { name: 'cancel', label: '取消', showAlways: true },
],
},
};
// 备注:弹窗弹出的时间和网速有关......
return {
dialogConfigs,
dialogConfigs: dialogJustFormConfigs,
tableConfig: {
table: null, // 此处可省略el-table 上的配置项
column: tableProps, // el-column-item 上的配置项
},
headFormConfigs: {
rules: null, // 名称是由 BaseSearchForm.vue 组件固定的
fields: headFormFields // 名称是由 BaseSearchForm.vue 组件固定的
fields: headFormFields, // 名称是由 BaseSearchForm.vue 组件固定的
},
urls: {
base: '/pms/productionLine',
page: '/pms/productionLine/page',
base: "/pms/productionLine",
page: "/pms/productionLine/page",
// subase: '/pms/blenderStepParam',
// subpage: '/pms/blenderStepParam/page',
// more...
}
}
}
},
};
}