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

update SmallDialog

Browse Source
This commit is contained in:
lb 2023-02-03 15:14:07 +08:00
parent 0c1252467e
commit 70243b527f
3 changed files with 173 additions and 210 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/DialogWithMenu.vue
View File

@ -205,9 +205,6 @@ export default {
}, },
}, },
methods: { methods: {
k() {
console.log("[DialogWithMenu] closed");
},
/** utitilities */ /** utitilities */
showButton(operate) { showButton(operate) {
const notDetailMode = !this.detailMode; const notDetailMode = !this.detailMode;

377
src/components/SmallDialog.vue
View File

@ -1,93 +1,60 @@
<template> <template>
<!-- :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" --> <!-- :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" -->
<el-dialog <el-dialog
class="a-small-dialog" class="a-small-dialog"
:visible.sync="visible" :visible.sync="visible"
@close="handleClose" @close="handleClose"
:distory-on-close="true" :distory-on-close="true"
:close-on-click-modal="false" :close-on-click-modal="false"
v-bind="$attrs" v-bind="$attrs"
:width="'30%'" :width="'30%'"
:modal="false" :modal="false"
:fullscreen="false" :fullscreen="false"
:top="'10vh'" :top="'10vh'"
> >
<!-- :append-to-body="appendToBody"> --> <!-- :append-to-body="appendToBody"> -->
<div> <div>
<el-form ref="dataForm" :model="dataForm"> <el-form ref="dataForm" :model="dataForm">
<el-row <el-row v-for="(row, rowIndex) in configs.rows" :key="'row_' + rowIndex" :gutter="20">
v-for="(row, rowIndex) in configs.rows" <el-col v-for="(col, colIndex) in row" :key="colIndex" :span="col.span ?? 24 / row.length">
:key="'row_' + rowIndex" <el-form-item :prop="col.prop" :rules="col.rules || null" :label="col.label">
:gutter="20" <el-input v-if="col.input" v-model="dataForm[col.prop]" clearable :disabled="detailMode" v-bind="col.elparams" />
> <el-select
<el-col v-if="col.select"
v-for="(col, colIndex) in row" v-model="dataForm[col.prop]"
:key="colIndex" clearable
:span="col.span ?? 24 / row.length" :disabled="detailMode"
> v-bind="col.elparams"
<el-form-item @change="handleSelectChange(col, $event)"
:prop="col.prop" >
:rules="col.rules || null" <el-option v-for="(opt, optIdx) in col.options" :key="'option_' + optIdx" :label="opt.label" :value="opt.value" />
:label="col.label" </el-select>
> <el-switch
<el-input v-if="col.switch"
v-if="col.input" v-model="dataForm[col.prop]"
v-model="dataForm[col.prop]" :active-value="1"
clearable :inactive-value="0"
:disabled="detailMode" @change="handleSwitchChange"
v-bind="col.elparams" :disabled="detailMode"
/> />
<el-select <el-input v-if="col.textarea" type="textarea" v-model="dataForm[col.prop]" :disabled="detailMode" v-bind="col.elparams" />
v-if="col.select" <!-- add more... -->
v-model="dataForm[col.prop]" </el-form-item>
clearable </el-col>
:disabled="detailMode" </el-row>
v-bind="col.elparams" </el-form>
@change="handleSelectChange(col, $event)" </div>
>
<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="1"
:inactive-value="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>
</div>
<!-- footer --> <!-- footer -->
<div slot="footer"> <div slot="footer">
<template v-for="(operate, index) in configs.operations"> <template v-for="(operate, index) in configs.operations">
<el-button <el-button v-if="showButton(operate)" :key="'operation_' + index" :type="operate.type" @click="handleBtnClick(operate)">{{
v-if="showButton(operate)" operate.label
:key="'operation_' + index" }}</el-button>
:type="operate.type" </template>
@click="handleBtnClick(operate)" <el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
>{{ operate.label }}</el-button </div>
> </el-dialog>
</template>
<el-button @click="handleBtnClick({ name: 'cancel' })">取消</el-button>
</div>
</el-dialog>
</template> </template>
<script> <script>
@ -98,136 +65,134 @@ import { pick as __pick } from "@/utils/filters";
// import i18n from '@/i18n' // import i18n from '@/i18n'
export default { export default {
name: "SmallDialog", name: "SmallDialog",
props: { props: {
configs: { configs: {
type: Object, type: Object,
default: () => ({}), default: () => ({}),
}, },
relatedId: { relatedId: {
type: String, type: String,
default: "", default: "",
}, },
}, },
inject: ["urls"], inject: ["urls"],
data() { data() {
const dataForm = {}; const dataForm = {};
this.configs.rows.forEach((row) => { this.configs.rows.forEach((row) => {
row.forEach((col) => { row.forEach((col) => {
dataForm[col.prop] = col.default ?? ""; dataForm[col.prop] = col.default ?? "";
console.log("[small dialog]==========>", col.prop, dataForm[col.prop]); console.log("[small dialog]==========>", col.prop, dataForm[col.prop]);
}); });
}); });
return { return {
visible: false, visible: false,
detailMode: false, detailMode: false,
dataForm, dataForm,
dataFormRules: {}, dataFormRules: {},
tempForm: [], // 临时保存自动生成的code，或其他数据 tempForm: [], // 临时保存自动生成的code，或其他数据
}; };
}, },
methods: { methods: {
/** utitilities */ /** utitilities */
showButton(operate) { showButton(operate) {
const notDetailMode = !this.detailMode; const notDetailMode = !this.detailMode;
const showAlways = operate.showAlways ?? false; const showAlways = operate.showAlways ?? false;
const editMode = operate.showOnEdit && this.dataForm.id; const editMode = operate.showOnEdit && this.dataForm.id;
const addMode = !operate.showOnEdit && !this.dataForm.id; const addMode = !operate.showOnEdit && !this.dataForm.id;
const permission = operate.permission const permission = operate.permission ? this.$hasPermission(operate.permission) : true;
? this.$hasPermission(operate.permission) return notDetailMode && (showAlways || ((editMode || addMode) && permission));
: true; },
return ( resetForm(excludeId = false) {
notDetailMode && (showAlways || ((editMode || addMode) && permission)) setTimeout(() => {
); Object.keys(this.dataForm).forEach((key) => {
}, console.log(">>> clearing key: ", key);
resetForm(excludeId = false) { if (excludeId && key === "id") return;
setTimeout(() => { this.dataForm[key] = null;
Object.keys(this.dataForm).forEach((key) => { });
console.log(">>> clearing key: ", key); this.detailMode = false;
if (excludeId && key === "id") return; }, 500);
this.dataForm[key] = null; },
});
this.detailMode = false;
}, 500);
},
init(id, isdetail = false) { init(id, isdetail = false) {
console.log("[small dialog] init", id, isdetail); console.log("[small dialog] init", id, isdetail);
this.detailMode = isdetail; this.detailMode = isdetail;
if (this.$refs.dataForm) this.$refs.dataForm.clearValidate() if (this.$refs.dataForm) this.$refs.dataForm.clearValidate();
this.$nextTick(() => { this.$nextTick(() => {
// this.$refs['dataForm'].resetFields(); // this.$refs['dataForm'].resetFields();
this.dataForm.id = id || null; this.dataForm.id = id || null;
if (this.dataForm.id) { if (this.dataForm.id) {
// 如果是编辑 // 如果是编辑
this.$http this.$http.get(this.urls.subase + `/${this.dataForm.id}`).then(({ data: res }) => {
.get(this.urls.subase + `/${this.dataForm.id}`) if (res && res.code === 0) {
.then(({ data: res }) => { const dataFormKeys = Object.keys(this.dataForm);
if (res && res.code === 0) { this.dataForm = __pick(res.data, dataFormKeys);
const dataFormKeys = Object.keys(this.dataForm); }
this.dataForm = __pick(res.data, dataFormKeys); this.visible = true;
} });
this.visible = true; } else {
}); // 如果不是编辑
} else { this.visible = true;
// 如果不是编辑 }
this.visible = true });
} },
});
},
handleSelectChange(col, event) {}, handleSelectChange(col, event) {},
handleSwitchChange() {}, handleSwitchChange() {},
handleBtnClick(payload) { handleBtnClick(payload) {
console.log("btn click payload: ", payload); console.log("btn click payload: ", payload);
console.log("configs", this.configs); console.log("configs", this.configs);
if ("name" in payload) { if ("name" in payload) {
switch (payload.name) { switch (payload.name) {
case "cancel": case "cancel":
this.handleClose(); this.handleClose();
break; break;
case "add": case "add":
case "update": { case "update": {
console.log('update extraParam: ', this.configs.extraParam) console.log("update extraParam: ", this.configs.extraParam);
const method = payload.name === "add" ? "POST" : "PUT"; const method = payload.name === "add" ? "POST" : "PUT";
this.$http({
url: this.urls.subase,
method,
data: {
...this.dataForm,
[this.configs.extraParam]: this.relatedId, // this.configs.extraParam 只能是字符串
},
}).then(({ data: res }) => {
console.log("[add&update] res is: ", res);
this.$message.success(
payload.name === "add" ? "添加成功" : "更新成功"
);
this.$emit("refreshDataList");
this.handleClose();
});
}
}
} else {
console.log("[x] 不是这么用的! 缺少name属性");
}
},
handleClose() { const fields = {};
this.resetForm(); fields[this.configs.extraParam] = this.relatedId;
this.visible = false; // [this.configs.extraParam]: this.relatedId, // this.configs.extraParam 只能是字符串
}, if (this.configs.forceAttachCode) fields["code"] = "";
},
this.$http({
url: this.urls.subase,
method,
data: {
...this.dataForm,
...fields
},
}).then(({ data: res }) => {
console.log("[add&update] res is: ", res);
this.$message.success(payload.name === "add" ? "添加成功" : "更新成功");
this.$emit("refreshDataList");
this.handleClose();
});
}
}
} else {
console.log("[x] 不是这么用的! 缺少name属性");
}
},
handleClose() {
this.resetForm();
this.visible = false;
},
},
}; };
</script> </script>
<style scoped> <style scoped>
.a-small-dialog >>> .el-dialog { .a-small-dialog >>> .el-dialog {
border-radius: 8px; border-radius: 8px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2); box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
} }
</style> </style>

1
src/views/modules/pms/product/config.js
View File

@ -117,6 +117,7 @@ export default function () {
subDialog: { subDialog: {
extraParam: 'productId', extraParam: 'productId',
forceAttachCode: true, // 产品属性新增必填 code 字段......
rows: [ rows: [
[ [
{ input: true, label: '属性名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } }, { input: true, label: '属性名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },