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

update 混料订单编辑功能

Browse Source
This commit is contained in:
lb
2023-03-14 14:42:37 +08:00
parent 2dae6153fd
commit 78cfff4d6d
4 changed files with 668 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

313
src/views/modules/pms/blenderOrder/components/ListViewWithHead.vue Normal file
View File

@@ -0,0 +1,313 @@
<!-- 表格页加上搜索条件 -->
<template>
<div class="list-view-with-head">
<BaseSearchForm :head-config="headConfig" @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-sizes="[1, 5, 10, 20, 50, 100]"
:page-size="size"
:total="totalPage"
layout="total, sizes, prev, pager, next, jumper"
></el-pagination>
<DialogJustForm
ref="edit-dialog"
v-if="!!dialogConfigs"
:dialog-visible.sync="dialogVisible"
:configs="dialogConfigs"
@refreshDataList="getList"
/>
</div>
</template>
<script>
import BaseListTable from "@/components/BaseListTable.vue";
import BaseSearchForm from "@/components/BaseSearchForm.vue";
import DialogJustForm from "./edit-dialog.vue";
import moment from "moment";
export default {
name: "ListViewWithHead",
components: { BaseSearchForm, BaseListTable, DialogJustForm },
props: {
tableConfig: {
type: Object,
default: () => ({
/** 列配置, 即 props **/ column: [],
/** 表格整体配置 */ table: 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: () => null,
},
},
activated() {
this.refreshLayoutKey = this.layoutTable();
},
data() {
return {
dialogVisible: false,
topBtnConfig: null,
totalPage: 100,
page: 1,
size: 20, // 默认20
dataList: [],
tableLoading: false,
refreshLayoutKey: null,
};
},
inject: ["urls"],
mounted() {
this.initDataWhenLoad && this.getList();
},
methods: {
/** 获取 列表数据 */
getList(queryParams) {
this.tableLoading = true;
const params = queryParams
? { ...queryParams, page: this.page, limit: this.size }
: {
page: this.page,
limit: this.size,
};
if (!queryParams && this.listQueryExtra && this.listQueryExtra.length) {
this.listQueryExtra.map((nameOrObj) => {
if (typeof nameOrObj === "string") params[nameOrObj] = "";
else if (typeof nameOrObj === "object") {
Object.keys(nameOrObj).forEach((key) => {
params[key] = nameOrObj[key];
});
}
});
}
// if (this.urls.pageIsPostApi) {
// } else {
// 默认是 get 方式请求 page
this.$http[this.urls.pageIsPostApi ? "post" : "get"](
this.urls.page,
this.urls.pageIsPostApi
? {
...params,
}
: {
params,
}
)
.then(({ data: res }) => {
console.log("[http response] res is: ", res);
if (res.code === 0) {
// page 场景:
if ("list" in res.data) {
/** 破碎记录的特殊需求：数据要结合单位 material + materialUnitDictValue */
if ("attachDictValue" in this.tableConfig.column) {
this.dataList = res.data.list.map((row) => {
this.tableConfig.column.attachDictValue(row, "unit", "qty", "materialUnitDictValue");
return row;
});
} else this.dataList = res.data.list;
this.totalPage = res.data.total;
}
} 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();
},
/** 处理 表格操作 */
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.name ?? data.id}" 吗?`, "提示", {
confirmButtonText: "确认",
cancelButtonText: "我再想想",
type: "warning",
})
.then(() => {
// this.$http.delete(this.urls.base + `/${data}`).then((res) => {
this.$http({
url: this.urls.base,
method: "DELETE",
data: [`${data.id}`],
}).then(({ data: res }) => {
if (res.code === 0) {
this.$message.success("删除成功!");
this.page = 1;
this.size = 10;
this.getList();
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
});
})
.catch((err) => {});
}
case "edit": {
this.openDialog(data); /** data is ==> id */
break;
}
case "view":
case "view-detail-action": {
this.openDialog(data, true);
break;
}
case "detach": {
return this.$http
.post(this.urls.detach, data /* { id: data } */, { headers: { "Content-Type": "application/json" } })
.then(({ data: res }) => {
if (res.code === 0) {
this.$message({
message: "下发成功",
type: "success",
duration: 1500,
onClose: () => {
this.getList();
},
});
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 1500,
});
}
});
}
}
},
handleBtnClick({ btnName, payload }) {
console.log("[search] form handleBtnClick", btnName, payload);
switch (btnName) {
case "新增":
this.openDialog();
break;
case "查询": {
const params = {};
/** 处理 payload 里的数据 */
if (typeof payload === "object") {
// BaseSearchForm 给这个组件传递了数据
Object.assign(params, payload);
if ("timerange" in params && !!params.timerange) {
const [startTime, endTime] = params["timerange"];
delete params.timerange;
params.startTime = moment(startTime).format("YYYY-MM-DD HH:mm:ss");
params.endTime = moment(endTime).format("YYYY-MM-DD HH:mm:ss");
}
}
/** 处理 listQueryExtra 里的数据 */
this.listQueryExtra?.map((cond) => {
if (typeof cond === "string") {
if (!!payload[cond]) {
params[cond] = payload[cond];
} else {
params[cond] = "";
}
} else if (typeof cond === "object") {
Object.keys(cond).forEach((key) => {
params[key] = cond[key];
});
}
});
console.log("查询", params);
this.getList(params);
break;
}
}
},
/** 导航器的操作 */
handleSizeChange(val) {
// val 是新值
this.page = 1;
this.size = val;
this.getList();
},
handlePageChange(val) {
// val 是新值
this.getList();
},
/** 打开对话框 */
openDialog(row_data) {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs["edit-dialog"].init(row_data);
});
},
},
};
</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 0.125px rgba(0, 0, 0, 0.125);
}
</style>

311
src/views/modules/pms/blenderOrder/components/edit-dialog.vue Normal file
View File

@@ -0,0 +1,311 @@
<template>
<el-dialog
class="dialog-just-form"
:visible="dialogVisible"
@close="handleClose"
:destroy-on-close="false"
:close-on-click-modal="configs.clickModalToClose ?? 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 || col.forceDisabled"
v-model="dataForm[col.prop]"
clearable
:disabled="detailMode || col.forceDisabled"
v-bind="col.elparams"
/>
<el-cascader
v-if="col.cascader"
v-model="dataForm[col.prop]"
:options="col.options"
:disabled="detailMode"
v-bind="col.elparams"
></el-cascader>
<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" />
<el-date-picker v-if="col.datetime" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
<div class="" v-if="col.component" style="margin: 42px 0 0">
<!-- 下面这个 component 几乎是为 富文本 quill 定制的了... TODO：后续可能会根据业务需求创建新的版本 -->
<component
:is="col.component"
:key="'component_' + col.prop"
@update:modelValue="handleComponentModelUpdate(col.prop, $event)"
:modelValue="dataForm[col.prop]"
:mode="detailMode ? 'detail' : dataForm.id ? 'edit' : 'create'"
/>
</div>
<!-- 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";
import Cookies from "js-cookie";
import moment from "moment";
export default {
name: "DialogJustForm",
components: {},
props: {
configs: {
type: Object,
default: () => ({
clickModalToClose: true,
forms: null,
}),
},
dialogVisible: {
type: Boolean,
default: false,
},
},
inject: ["urls"],
data() {
const dataForm = {};
this.configs.form.rows.forEach((row) => {
row.forEach((col) => {
dataForm[col.prop] = col.default ?? null;
if (col.fetchData)
col.fetchData().then(({ data: res }) => {
if (res.code === 0) {
if ("list" in res.data) {
this.$set(
col,
"options",
res.data.list.map((i) => ({
label: col.optionLabelProp ? i[col.optionLabelProp] : i.name,
value: col.optionValue ? i[col.optionValue] : i.id,
}))
);
} else if (Array.isArray(res.data)) {
this.$set(
col,
"options",
res.data.map((i) => ({
label: col.optionLabelProp ? i[col.optionLabelProp] : i.name,
value: col.optionValue ? i[col.optionValue] : i.id,
}))
);
} else {
console.log("请检查返回的数据类型");
}
} else {
col.options.splice(0);
}
});
});
});
return {
loadingStatus: false,
dataForm,
detailMode: false,
baseDialogConfig: null,
};
},
computed: {
uploadHeaders() {
return {
token: Cookies.get("token") || "",
};
},
},
methods: {
handleFilelistUpdate(newFilelist) {
// TODO: 直接访问 .files 可能不太合适
this.dataForm.files = newFilelist.map((file) => ({
id: file.id,
name: file.name,
url: file.url,
typeCode: file.typeCode,
}));
// 更新请求
if ("id" in this.dataForm && this.dataForm.id !== null && this.dataForm.id !== undefined) this.addOrUpdate("PUT");
else
this.$notify({
title: "等待保存",
message: "已添加文件，请手动点击保存！",
type: "warning",
duration: 2500,
});
},
/** 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(
() => {
Object.keys(this.dataForm).forEach((key) => {
if (excludeId && key === "id") return;
this.dataForm[key] = null;
});
console.log("[DialogJustForm resetForm()] clearing form...");
this.$refs.dataForm.clearValidate();
this.$emit("dialog-closed"); // 触发父组件销毁自己
},
immediate ? 0 : 200
);
},
init({ id, code, blender }) {
// id 和 混料机 ID 混料订单号
if (this.$refs.dataForm) {
this.$refs.dataForm.clearValidate();
}
this.detailMode = false;
this.$nextTick(() => {
this.dataForm.id = id || null;
this.dataForm.blender = blender;
this.dataForm.code = code;
});
},
/** handlers */
handleSelectChange(col, eventValue) {
// console.log("[dialog] select change: ", col, eventValue);
this.$forceUpdate();
},
handleSwitchChange(val) {
console.log("[dialog] switch change: ", val, this.dataForm);
},
handleComponentModelUpdate(propName, { subject, payload: { data } }) {
this.dataForm[propName] = JSON.stringify(data);
console.log("[DialogJustForm] handleComponentModelUpdate", this.dataForm[propName]);
},
addOrUpdate(method = "POST") {
this.$refs.dataForm.validate((passed, result) => {
if (passed) {
this.loadingStatus = true;
const { id, blender } = this.dataForm
return this.$http.get(this.urls.changeBlender, { params: { id, blender } })
.then(({ data: res }) => {
this.loadingStatus = false;
if (res.code === 0) {
this.$message.success("更新成功");
this.$emit("refreshDataList");
this.handleClose();
} else {
this.$message({
message: `${res.code}: ${res.msg}`,
type: "error",
duration: 2000,
});
}
})
.catch((errMsg) => {
this.$message.error("参数错误：" + errMsg);
if (this.loadingStatus) this.loadingStatus = false;
});
} else {
this.$message.error("请核查字段信息");
}
});
},
handleBtnClick(payload) {
console.log("btn click payload: ", payload);
if ("name" in payload) {
switch (payload.name) {
case "cancel":
this.handleClose();
break;
case "update":
this.addOrUpdate();
break;
}
} else {
console.log("[x] 不是这么用的! 缺少name属性");
}
},
handleUploadChange(file, fileList) {
console.log("[Upload] handleUploadChange...", file, fileList);
},
handleClose() {
this.resetForm();
this.$emit("update:dialogVisible", 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,
.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>