update SmallDialog
Cette révision appartient à :
Parent
0c1252467e
révision
70243b527f
@ -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;
|
||||||
|
|||||||
@ -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;
|
|
||||||
if (this.$refs.dataForm) this.$refs.dataForm.clearValidate()
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.detailMode = isdetail;
|
||||||
// this.$refs['dataForm'].resetFields();
|
if (this.$refs.dataForm) this.$refs.dataForm.clearValidate();
|
||||||
this.dataForm.id = id || null;
|
|
||||||
|
|
||||||
if (this.dataForm.id) {
|
this.$nextTick(() => {
|
||||||
// 如果是编辑
|
// this.$refs['dataForm'].resetFields();
|
||||||
this.$http
|
this.dataForm.id = id || null;
|
||||||
.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
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
handleSelectChange(col, event) {},
|
if (this.dataForm.id) {
|
||||||
handleSwitchChange() {},
|
// 如果是编辑
|
||||||
|
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) {
|
handleSelectChange(col, event) {},
|
||||||
console.log("btn click payload: ", payload);
|
handleSwitchChange() {},
|
||||||
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属性");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleClose() {
|
handleBtnClick(payload) {
|
||||||
this.resetForm();
|
console.log("btn click payload: ", payload);
|
||||||
this.visible = false;
|
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>
|
</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>
|
||||||
|
|||||||
@ -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: '请输入属性名称' } },
|
||||||
|
|||||||
Chargement…
Référencer dans un nouveau ticket
Block a user