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

update SmallDialog

docs_0727
lb 1 year ago
parent
0c1252467e
commit
70243b527f
3 changed files with 173 additions and 210 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -3
      src/components/DialogWithMenu.vue
  2. +172
    -207
      src/components/SmallDialog.vue
  3. +1
    -0
      src/views/modules/pms/product/config.js

+ 0
- 3
src/components/DialogWithMenu.vue View File

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


+ 172
- 207
src/components/SmallDialog.vue View File

@@ -1,93 +1,60 @@
<template>
<!-- :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" -->
<el-dialog
class="a-small-dialog"
:visible.sync="visible"
@close="handleClose"
:distory-on-close="true"
:close-on-click-modal="false"
v-bind="$attrs"
:width="'30%'"
:modal="false"
:fullscreen="false"
:top="'10vh'"
>
<!-- :append-to-body="appendToBody"> -->
<div>
<el-form ref="dataForm" :model="dataForm">
<el-row
v-for="(row, rowIndex) in configs.rows"
:key="'row_' + rowIndex"
:gutter="20"
>
<el-col
v-for="(col, colIndex) in row"
:key="colIndex"
:span="col.span ?? 24 / row.length"
>
<el-form-item
:prop="col.prop"
:rules="col.rules || null"
:label="col.label"
>
<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="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>
<!-- :title="isDetail ? title.detail : !dataForm.id ? title.add : title.edit" -->
<el-dialog
class="a-small-dialog"
:visible.sync="visible"
@close="handleClose"
:distory-on-close="true"
:close-on-click-modal="false"
v-bind="$attrs"
:width="'30%'"
:modal="false"
:fullscreen="false"
:top="'10vh'"
>
<!-- :append-to-body="appendToBody"> -->
<div>
<el-form ref="dataForm" :model="dataForm">
<el-row v-for="(row, rowIndex) in configs.rows" :key="'row_' + rowIndex" :gutter="20">
<el-col v-for="(col, colIndex) in row" :key="colIndex" :span="col.span ?? 24 / row.length">
<el-form-item :prop="col.prop" :rules="col.rules || null" :label="col.label">
<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="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 -->
<div slot="footer">
<template v-for="(operate, index) in configs.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>
<!-- footer -->
<div slot="footer">
<template v-for="(operate, index) in configs.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>
@@ -98,136 +65,134 @@ import { pick as __pick } from "@/utils/filters";
// import i18n from '@/i18n'

export default {
name: "SmallDialog",
props: {
configs: {
type: Object,
default: () => ({}),
},
relatedId: {
type: String,
default: "",
},
},
inject: ["urls"],
data() {
const dataForm = {};
this.configs.rows.forEach((row) => {
row.forEach((col) => {
dataForm[col.prop] = col.default ?? "";
console.log("[small dialog]==========>", col.prop, dataForm[col.prop]);
});
});
name: "SmallDialog",
props: {
configs: {
type: Object,
default: () => ({}),
},
relatedId: {
type: String,
default: "",
},
},
inject: ["urls"],
data() {
const dataForm = {};
this.configs.rows.forEach((row) => {
row.forEach((col) => {
dataForm[col.prop] = col.default ?? "";
console.log("[small dialog]==========>", col.prop, dataForm[col.prop]);
});
});

return {
visible: false,
detailMode: false,
dataForm,
dataFormRules: {},
tempForm: [], // 临时保存自动生成的code，或其他数据
};
},
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) {
setTimeout(() => {
Object.keys(this.dataForm).forEach((key) => {
console.log(">>> clearing key: ", key);
if (excludeId && key === "id") return;
this.dataForm[key] = null;
});
this.detailMode = false;
}, 500);
},
return {
visible: false,
detailMode: false,
dataForm,
dataFormRules: {},
tempForm: [], // 临时保存自动生成的code，或其他数据
};
},
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) {
setTimeout(() => {
Object.keys(this.dataForm).forEach((key) => {
console.log(">>> clearing key: ", key);
if (excludeId && key === "id") return;
this.dataForm[key] = null;
});
this.detailMode = false;
}, 500);
},

init(id, isdetail = false) {
console.log("[small dialog] init", id, isdetail);
this.detailMode = isdetail;
if (this.$refs.dataForm) this.$refs.dataForm.clearValidate()
init(id, isdetail = false) {
console.log("[small dialog] init", id, isdetail);

this.$nextTick(() => {
// this.$refs['dataForm'].resetFields();
this.dataForm.id = id || null;
this.detailMode = isdetail;
if (this.$refs.dataForm) this.$refs.dataForm.clearValidate();

if (this.dataForm.id) {
// 如果是编辑
this.$http
.get(this.urls.subase + `/${this.dataForm.id}`)
.then(({ data: res }) => {
if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm);
this.dataForm = __pick(res.data, dataFormKeys);
}
this.visible = true;
});
} else {
// 如果不是编辑
this.visible = true
}
});
},
this.$nextTick(() => {
// this.$refs['dataForm'].resetFields();
this.dataForm.id = id || null;

handleSelectChange(col, event) {},
handleSwitchChange() {},
if (this.dataForm.id) {
// 如果是编辑
this.$http.get(this.urls.subase + `/${this.dataForm.id}`).then(({ data: res }) => {
if (res && res.code === 0) {
const dataFormKeys = Object.keys(this.dataForm);
this.dataForm = __pick(res.data, dataFormKeys);
}
this.visible = true;
});
} else {
// 如果不是编辑
this.visible = true;
}
});
},

handleBtnClick(payload) {
console.log("btn click payload: ", payload);
console.log("configs", this.configs);
if ("name" in payload) {
switch (payload.name) {
case "cancel":
this.handleClose();
break;
case "add":
case "update": {
console.log('update extraParam: ', this.configs.extraParam)
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属性");
}
},
handleSelectChange(col, event) {},
handleSwitchChange() {},

handleClose() {
this.resetForm();
this.visible = false;
},
},
handleBtnClick(payload) {
console.log("btn click payload: ", payload);
console.log("configs", this.configs);
if ("name" in payload) {
switch (payload.name) {
case "cancel":
this.handleClose();
break;
case "add":
case "update": {
console.log("update extraParam: ", this.configs.extraParam);
const method = payload.name === "add" ? "POST" : "PUT";

const fields = {};
fields[this.configs.extraParam] = this.relatedId;
// [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>

<style scoped>
.a-small-dialog >>> .el-dialog {
border-radius: 8px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.2);
}
</style>

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

@@ -117,6 +117,7 @@ export default function () {

subDialog: {
extraParam: 'productId',
forceAttachCode: true, // 产品属性新增必填 code 字段......
rows: [
[
{ input: true, label: '属性名称', prop: 'name', rules: { required: true, message: 'not empty', trigger: 'blur' }, elparams: { placeholder: '请输入属性名称' } },


Write Preview
Loading…
Cancel
Save