mt-fe-group/pms-aomei
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update 物料

Browse Source
This commit is contained in:
lb 2023-02-06 14:24:12 +08:00
parent 6b292d9a47
commit f568f2056a
4 changed files with 267 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
src/components/DialogWithMenu.vue
View File

@ -46,8 +46,8 @@
'el-icon-s-data': tab.key === 'attr',
'el-icon-folder-opened': tab.key === 'attachment',
}"
></i
> {{ tab.name }}
></i>
{{ tab.name }}
</span>
<div v-if="tab.key === 'info'">
@ -56,12 +56,12 @@
<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">
<el-form-item :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-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="disableCondition(col.prop)" v-bind="col.elparams" />
<el-select
v-if="col.select"
v-model="dataForm[col.prop]"
clearable
:disabled="detailMode"
:disabled="disableCondition(col.prop)"
v-bind="col.elparams"
@change="handleSelectChange(col, $event)"
>
@ -73,9 +73,15 @@
:active-value="1"
:inactive-value="0"
@change="handleSwitchChange"
:disabled="detailMode"
:disabled="disableCondition(col.prop)"
/>
<el-input
v-if="col.textarea"
type="textarea"
v-model="dataForm[col.prop]"
:disabled="disableCondition(col.prop)"
v-bind="col.elparams"
/>
<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>
@ -134,22 +140,33 @@ export default {
inject: ["urls"],
data() {
const dataForm = {};
const autoDisabledList = [];
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
if (col.upload) dataForm[col.prop] = col.default ?? [];
else dataForm[col.prop] = col.default ?? null;
if (col.autoDisabled) autoDisabledList.push(col.prop);
if (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 }))
);
if (!col.options || !col.options.length)
this.$set(
col,
"options",
res.data.list.map((i) => ({ label: i.name, value: i.id }))
);
// col.options = res.data.list;
else if (col.options.length) {
res.data.list.unshift(...col.options);
this.$set(
col,
"options",
res.data.list.map((i) => ({ label: i.name, value: i.id }))
);
}
} else {
col.options.splice(0);
}
@ -184,11 +201,12 @@ export default {
activeMenu: this.configs.menu[0].name,
dataForm,
detailMode: false,
autoDisabledList,
showBaseDialog: false,
baseDialogConfig: null,
subList: [],
showSubDialog: false,
disableXXX: false,
};
},
computed: {
@ -204,7 +222,29 @@ export default {
return this.detailMode ? this.configs.table.props.filter((v) => v.prop !== "operations") : this.configs.table.props;
},
},
watch: {
// "dataForm.parentId": function (val, old) {
// if (val && val !== "0") {
// // 如果不是 '无' 选项，就锁定 typeDictValue(物料类别)，和 typeId(物料类型)
// this.$http.get(`/pms/material/${val}`).then(({ data: res }) => {
// if (res.code === 0) {
// const { typeDictValue, typeId } = res.data;
// this.dataForm.typeDictValue = typeDictValue;
// this.dataForm.typeId = typeId;
// this.disableXXX = true;
// }
// });
// } else {
// this.dataForm.typeDictValue = null;
// this.dataForm.typeId = null;
// this.disableXXX = false;
// }
// },
},
methods: {
disableCondition(prop) {
return this.detailMode || (this.disableXXX && this.autoDisabledList.indexOf(prop) !== -1);
},
/** utitilities */
showButton(operate) {
const notDetailMode = !this.detailMode;

138
src/views/modules/pms/material/components/BaseListTable.vue Normal file
View File

@ -0,0 +1,138 @@
<!-- 这里单纯的配置表格就好了-->
<template>
<div class="base-list-table w-full">
<el-table
:data="tableData"
v-bind="tableConfig"
ref="base-list-table"
:cell-style="{ padding: 0 }"
:header-cell-style="/** 重写表格样式 **/ {
padding: '8px 0',
}"
row-key="id"
:lazy="true"
:load="loadSubClassFn"
>
<!-- @cell-mouse-enter="(row, col, cell, event) => $emit('cell-mouse-enter', row, col, cell, event)"> -->
<!-- @cell-mouse-leave="(row, col, cell, event) => $emit('cell-mouse-leave', row, col, cell, event)"> -->
<!-- 表格头定义 -->
<template v-for="(head, idx) in columnConfig">
<!-- 索引列 -->
<el-table-column
:key="idx"
v-if="head.type"
:type="head.type"
:label="head.label || head.name || ''"
:header-align="head.align || 'center'"
:align="head.align || 'center'"
:width="head.width || 50"
:index="
head.type === 'index'
? (val) => {
return val + 1 + (page - 1) * size;
}
: null
"
v-bind="head.more"
></el-table-column>
<!-- 普通的表头 -->
<el-table-column
v-else
:key="idx + 'else'"
:label="head.label ? head.label : head.name"
:prop="head.prop || null"
:width="head.width || null"
:min-width="head.minWidth || null"
:fixed="head.fixed || null"
:show-overflow-tooltip="head.showOverflowTooltip || true"
:tooltip-effect="head.tooltipEffect || 'light'"
filter-placement="top"
:align="head.align || null"
v-bind="head.more"
>
<!-- 子组件 -->
<template v-if="head.prop" slot-scope="scope">
<component
v-if="head.subcomponent"
:is="head.subcomponent"
:key="idx + 'sub'"
:inject-data="{ ...scope.row, head }"
@emit-data="handleSubEmitData"
/>
<!-- 直接展示数据或应用过滤器 -->
<span v-else>{{
scope.row[head.prop] | commonFilter(head.filter)
}}</span>
</template>
<!-- 多级表头 -->
<template v-if="!head.prop && head.children">
<TableHead
v-for="(subhead, subindex) in head.children"
:key="'subhead-' + idx + '-subindex-' + subindex"
:opt="subhead"
/>
</template>
</el-table-column>
</template>
</el-table>
</div>
</template>
<script>
import TableHead from "@/components/TableHead.vue";
// 1. 表格拖拽开启/关闭
// 2. 表格的样式'
// 3. more...
export default {
name: "BaseListTable",
components: { TableHead },
filters: {
commonFilter: (source, filterType = (a) => a) => {
return filterType(source);
},
},
props: {
tableConfig: {
type: Object,
default: () => ({}),
},
columnConfig: {
type: Array,
default: () => [],
},
tableData: {
type: Array,
default: () => [],
},
},
inject: ["urls"],
data() {
return {
page: 1,
size: 20, // 默认20
dataList: [],
};
},
watch: {
// 'props.tableData': {
// handler: () => {
// this.$refs['base-list-table'].doLayout();
// },
// immediate: true,
// },
},
methods: {
handleSubEmitData(payload) {
console.log("[component] BaseListTable handleSubEmitData(): ", payload);
this.$emit("operate-event", payload);
},
loadSubClassFn(tree, treeNode, resolve) {
this.$emit('load-sub', { tree, treeNode, resolve })
}
},
};
</script>
<style scoped></style>

68
src/views/modules/pms/material/components/ListViewWithHead.vue
View File

@ -15,6 +15,7 @@
:column-config="tableConfig.column"
:table-data="dataList"
@operate-event="handleOperate"
@load-sub="handleLoadSub"
/>
<el-pagination
@ -35,20 +36,20 @@
v-if="dialogType === DIALOG_WITH_MENU"
:dialog-visible.sync="dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList"
@refreshDataList="handleRefreshDatalist"
/>
<DialogJustForm
ref="edit-dialog"
v-if="dialogType === DIALOG_JUST_FORM"
:dialog-visible.sync="dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList"
@refreshDataList="handleRefreshDatalist"
/>
</div>
</template>
<script>
import BaseListTable from "@/components/BaseListTable.vue";
import BaseListTable from "./BaseListTable.vue";
import BaseSearchForm from "@/components/BaseSearchForm.vue";
import DialogWithMenu from "@/components/DialogWithMenu.vue";
import DialogJustForm from "@/components/DialogJustForm.vue";
@ -56,10 +57,6 @@ import DialogJustForm from "@/components/DialogJustForm.vue";
const DIALOG_WITH_MENU = "DialogWithMenu";
const DIALOG_JUST_FORM = "DialogJustForm";
function constructToTree(list) {
return list;
}
export default {
name: "ListViewWithHead",
components: { BaseSearchForm, BaseListTable, DialogWithMenu, DialogJustForm },
@ -110,17 +107,21 @@ export default {
this.initDataWhenLoad && this.getList();
},
methods: {
/**
* 转换服务器数据的中间层
* 为了抹平真实服务器数据和我本地的测试服务器数据的差异
**/
prehandle_data(list) {
/** 根据具体情况修改 */
list.forEach((data) => {
data.id = data._id;
delete data._id;
handleLoadSub({ tree, treeNode, resolve }) {
console.log("tree, treeNOde, resovle is:", tree, treeNode, resolve);
this.$http.get(`${this.urls.tree}?rootId=${tree.id}`).then(({ data: res }) => {
if (res.code === 0 && res.data) {
resolve(
res.data.map((item) => {
if (item.children) item.hasChildren = true;
/** TODO: 合并物料类型 和 类别 */
return item;
})
);
}
});
return list;
},
/** 获取 列表数据 */
@ -142,7 +143,10 @@ export default {
this.$http
.get(this.urls.page, {
params,
params: {
...params,
parentId: "0",
},
})
.then(({ data: res }) => {
console.log("[http response] res is: ", res);
@ -150,20 +154,8 @@ export default {
// page 场景:
if ("list" in res.data) {
// real env:
this.dataList = constructToTree(
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.list.map((_) => ({ ..._, hasChildren: true }));
// this.dataList = res.data.records;
this.totalPage = res.data.total;
} else {
@ -171,6 +163,8 @@ export default {
this.totalPage = 0;
}
this.tableLoading = false;
// location.reload()
});
},
@ -221,12 +215,12 @@ export default {
break;
}
case "status": {
console.log('status', data)
console.log("status", data);
// TODO: 类似于这种字符串，可以统一集中到一个文件里
const { id, code } = data;
const queryCondition = { id, code };
if ("enabled" in data) queryCondition.enabled = data['enabled'];
if ("status" in data) queryCondition.status = data['status'];
if ("enabled" in data) queryCondition.enabled = data["enabled"];
if ("status" in data) queryCondition.status = data["status"];
// 更改状态，更改状态需要 id 和 code 然后是 状态 enabled
this.$http.put(this.urls.base, queryCondition).then(({ data: res }) => {
if (res.code === 0) {
@ -238,6 +232,10 @@ export default {
}
},
handleRefreshDatalist() {
location.reload()
},
handleBtnClick({ btnName, payload }) {
console.log("[search] form handleBtnClick", btnName, payload);
switch (btnName) {

77
src/views/modules/pms/material/config.js
View File

@ -5,7 +5,8 @@ import { timeFilter, dictFilter } from "@/utils/filters";
export default function () {
const tableProps = [
{ prop: "createTime", label: "添加时间", filter: timeFilter },
{ type: 'index', label: '序号' },
// { prop: "createTime", label: "添加时间", filter: timeFilter },
{ prop: "name", label: "物料名称" },
{ prop: "code", label: "物料编码" },
{ prop: "typeDictValue", label: "类别", filter: dictFilter("material_category") }, // subcomponent: {/** TODO: create a new component for this option */} },
@ -61,7 +62,7 @@ export default function () {
menu: [
{ name: "物料信息", key: "info" },
{ name: "物料属性信息", key: "attr", onlyEditMode: true },
{ name: "添加子类", key: "add-sub", onlyEditMode: true },
// { name: "添加子类", key: "add-sub", onlyEditMode: true },
],
form: {
rows: [
@ -80,6 +81,20 @@ export default function () {
rules: { required: true, message: "not empty", trigger: "blur" },
elparams: { placeholder: "请输入物料编码" },
},
{ input: true, label: "规格", prop: "description", elparams: { placeholder: "规格" } },
],
[
{
select: true,
label: "父级物料",
prop: "parentId",
// TODO: 待解决：DialogWithMenu 中设置default只在初始化的时候有效，一旦清空过就无效了
// default: '0',
// rules: { required: true, message: "not empty", trigger: "blur" },
options: [{ id: '0', name: '无' }], // 手动注入额外选项，用到的场景不多...
fetchData: () => this.$http.get('/pms/material/page', { params: { page: 1, limit: 999, key: '' } }),
elparams: { placeholder: "请选择父级物料" },
},
{
select: true,
label: "物料类型",
@ -88,17 +103,33 @@ export default function () {
options: [],
fetchData: () => this.$http.get('/pms/materialType/page', { params: { page: 1, limit: 999 } }),
elparams: { placeholder: "请输入物料类型" },
// autoDisabled: true, // 有某个条件触发后，自动变成 disabled 状态
},
],
[
{
select: true,
label: "父级物料",
prop: "parentId",
rules: { required: true, message: "not empty", trigger: "blur" },
options: [],
fetchData: () => this.$http.get('/pms/material/page', { params: { page: 1, limit: 999, key: '' } }),
elparams: { placeholder: "请选择父级物料" },
label: "物料类别",
prop: "typeDictValue",
options: dictList["material_category"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "物料类别" },
// autoDisabled: true
},
// {
// input: true,
// label: "设备类型",
// prop: "eqTypeId",
// rules: { required: true, message: "not empty", trigger: "blur" },
// elparams: { placeholder: "请输入设备类型" },
// },
],
[
{
select: true,
label: "单位",
prop: "unitDictValue",
options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "单位" },
},
{
input: true,
@ -112,30 +143,7 @@ export default function () {
prop: "enAb",
elparams: { placeholder: "请输入缩写" },
},
// {
// input: true,
// label: "设备类型",
// prop: "eqTypeId",
// rules: { required: true, message: "not empty", trigger: "blur" },
// elparams: { placeholder: "请输入设备类型" },
// },
],
[
{
select: true,
label: "物料类别",
prop: "typeDictValue",
options: dictList["material_category"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "物料类别" },
},
{
select: true,
label: "单位",
prop: "unitDictValue",
options: dictList["unit"].map((u) => ({ label: u.dictLabel, value: u.dictValue })),
elparams: { placeholder: "单位" },
},
{ input: true, label: "规格", prop: "description", elparams: { placeholder: "规格" } },
],
[{ textarea: true, label: "备注", prop: "remark", elparams: { placeholder: "备注" } }],
],
@ -206,6 +214,7 @@ export default function () {
urls: {
base: "/pms/material",
page: "/pms/material/page",
tree: "/pms/material/tree",
subase: "/pms/materialArrt",
subpage: "/pms/materialArrt/page",
// more...