mt-fe-group/yudao-dev
12
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

apply DialogForm & debug

Browse Source
This commit is contained in:
lb 2023-08-02 15:16:40 +08:00
parent b6e4767346
commit 006e94a865
2 changed files with 98 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/views/quality/base/qualityInspectionType/index.vue
View File

@ -33,9 +33,27 @@
<base-dialog <base-dialog
:dialogTitle="title" :dialogTitle="title"
:dialogVisible="open" :dialogVisible="open"
@close="cancel"
@cancel="cancel" @cancel="cancel"
@confirm="submitForm"> @confirm="submitForm">
<el-form ref="form" :model="form" :rules="rules" label-width="128px"> <DialogForm
v-if="open"
ref="form"
:dataForm="form"
:rows="[
[
{
input: true,
label: '检测类型名称',
prop: 'name',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
[{ input: true, label: '检测类型编码', prop: 'code' }],
[{ input: true, label: '备注', prop: 'remark' }],
]" />
<!-- <el-form ref="form" :model="form" :rules="rules" label-width="128px">
<el-form-item label="检测类型名称" prop="name"> <el-form-item label="检测类型名称" prop="name">
<el-input v-model="form.name" placeholder="请输入检测类型名称" /> <el-input v-model="form.name" placeholder="请输入检测类型名称" />
</el-form-item> </el-form-item>
@ -45,14 +63,14 @@
<el-form-item label="备注" prop="remark"> <el-form-item label="备注" prop="remark">
<el-input v-model="form.remark" placeholder="请输入备注" /> <el-input v-model="form.remark" placeholder="请输入备注" />
</el-form-item> </el-form-item>
</el-form> </el-form> -->
</base-dialog> </base-dialog>
</div> </div>
</template> </template>
<script> <script>
import moment from 'moment'; import moment from 'moment';
import DialogForm from '../../components/dialogForm.vue';
import { import {
createQualityInspectionType, createQualityInspectionType,
@ -65,19 +83,23 @@ import {
export default { export default {
name: 'QualityInspectionType', name: 'QualityInspectionType',
components: {}, components: { DialogForm },
data() { data() {
return { return {
tableBtn: [ tableBtn: [
this.$auth.hasPermi('base:quality-inspection-type:update') ? { this.$auth.hasPermi('base:quality-inspection-type:update')
type: 'edit', ? {
btnName: '修改', type: 'edit',
} : undefined, btnName: '修改',
this.$auth.hasPermi('base:quality-inspection-type:delete') ? { }
type: 'delete', : undefined,
btnName: '删除', this.$auth.hasPermi('base:quality-inspection-type:delete')
} : undefined, ? {
].filter(v=>v), type: 'delete',
btnName: '删除',
}
: undefined,
].filter((v) => v),
tableData: [], tableData: [],
tableProps: [ tableProps: [
{ {
@ -173,7 +195,7 @@ export default {
// name: 'reset', // name: 'reset',
// }, // },
{ {
type: 'separate' type: 'separate',
}, },
{ {
type: this.$auth.hasPermi('base:quality-inspection-type:create') type: this.$auth.hasPermi('base:quality-inspection-type:create')
@ -195,6 +217,14 @@ export default {
], ],
}; };
}, },
// watch: {
// form: {
// handler: (val) => {
// console.log('form changed', val);
// },
// deep: true
// },
// },
created() { created() {
this.getList(); this.getList();
}, },
@ -289,10 +319,13 @@ export default {
}, },
/** 提交按钮 */ /** 提交按钮 */
submitForm() { submitForm() {
// console.log('this.$refs.form', this.$refs.form);
// return;
this.$refs['form'].validate((valid) => { this.$refs['form'].validate((valid) => {
if (!valid) { if (!valid) {
return; return;
} }
console.log('final form', JSON.stringify(this.form));
// 修改的提交 // 修改的提交
if (this.form.id != null) { if (this.form.id != null) {
updateQualityInspectionType(this.form).then((response) => { updateQualityInspectionType(this.form).then((response) => {

89
src/views/quality/components/dialogForm.vue
View File

@ -9,21 +9,20 @@
<el-form <el-form
ref="form" ref="form"
:model="form" :model="form"
:rules="rules" :label-width="`${labelWidth}px`"
label-width="`${labelWidth}px`"
v-loading="formLoading"> v-loading="formLoading">
<el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex"> <el-row :gutter="20" v-for="(row, rindex) in rows" :key="rindex">
<el-col v-for="col in row" :key="col.label" :span="24 / row.length"> <el-col v-for="col in row" :key="col.label" :span="24 / row.length">
<el-form-item :label="col.label" :prop="col.prop"> <el-form-item :label="col.label" :prop="col.prop" :rules="col.rules">
<el-input <el-input
v-if="col.input" v-if="col.input"
v-model="form[col.prop]" v-model="form[col.prop]"
@change="$emit('update', form)" @change="$emit('update', form)"
rules="col.rules"
v-bind="col.bind" /> v-bind="col.bind" />
<el-select <el-select
v-if="col.select" v-if="col.select"
v-model="form[col.prop]" v-model="form[col.prop]"
@change="$emit('update', form)"
v-bind="col.bind"> v-bind="col.bind">
<el-option <el-option
v-for="opt in optionListOf[col.prop]" v-for="opt in optionListOf[col.prop]"
@ -42,12 +41,14 @@
* 找到最长的label * 找到最长的label
* @param {*} options * @param {*} options
*/ */
function findMaxLabelWidth(options) { function findMaxLabelWidth(rows) {
let max = 0; let max = 0;
options.forEach((opt) => { rows.forEach((row) => {
if (opt.label.length > max) { row.forEach((opt) => {
max = opt.label.length; if (opt.label.length > max) {
} max = opt.label.length;
}
});
}); });
return max; return max;
} }
@ -61,7 +62,7 @@ export default {
emits: ['update'], emits: ['update'],
components: {}, components: {},
props: { props: {
options: { rows: {
type: Array, type: Array,
default: () => [], default: () => [],
}, },
@ -78,9 +79,10 @@ export default {
}, },
computed: { computed: {
labelWidth() { labelWidth() {
let max = findMaxLabelWidth(this.options); let max = findMaxLabelWidth(this.rows);
// 每个汉字占20px // 每个汉字占20px
return max * 20; return max * 20;
// return max * 20 + 'px';
}, },
form: { form: {
get() { get() {
@ -97,38 +99,49 @@ export default {
this.handleOptions(); this.handleOptions();
}, },
methods: { methods: {
/** 模拟透传 ref */
validate(cb) {
return this.$refs.form.validate(cb);
},
resetFields(args) {
return this.$refs.form.resetFields(args);
},
handleOptions() { handleOptions() {
this.formLoading = true;
const promiseList = []; const promiseList = [];
this.options.forEach(async (opt) => { this.rows.forEach((cols) => {
if (opt.options) { cols.forEach(async (opt) => {
this.optionListOf[opt.prop] = opt.options; if (opt.options) {
} else if (opt.url) { this.optionListOf[opt.prop] = opt.options;
promiseList.push(async () => { } else if (opt.url) {
const response = await this.$axios(opt.url, { promiseList.push(async () => {
method: opt.method ?? 'get', const response = await this.$axios(opt.url, {
method: opt.method ?? 'get',
});
console.log('[dialogForm:handleOptions:response]', response);
const list =
'list' in response.data ? response.data.list : response.data;
this.$set(
this.optionListOf,
opt.prop,
list.map((item) => ({
label: item[opt.labelKey ?? 'name'],
value: item[opt.valueKey ?? 'id'],
}))
);
}); });
console.log('[dialogForm:handleOptions:response]', response); try {
const list = this.formLoading = true;
'list' in response.data ? response.data.list : response.data; await Promise.all(promiseList);
this.$set( this.formLoading = false;
this.optionListOf, } catch (error) {
opt.prop, console.log('[dialogForm:handleOptions:error]', error);
list.map((item) => ({ this.formLoading = false;
label: item[opt.labelKey ?? 'name'], }
value: item[opt.valueKey ?? 'id'],
}))
);
});
try {
await Promise.all(promiseList);
this.formLoading = false;
} catch (error) {
console.log('[dialogForm:handleOptions:error]', error);
this.formLoading = false;
} }
} });
}); });
// this.formLoading = false;
}, },
}, },
}; };