@@ -1,5 +0,0 @@ | |||
export default { | |||
data() { | |||
} | |||
} |
@@ -37,8 +37,12 @@ | |||
@confirm="submitForm"> | |||
<el-form ref="form" :model="form" :rules="rules" label-width="100px"> | |||
<el-form-item label="检测类型id" prop="typeId"> | |||
<el-select v-model="form.typeId" placeholder="请选择检测类型id"> | |||
<el-option label="请选择字典生成" value="" /> | |||
<el-select v-model="form.typeId" placeholder="请选择检测类型"> | |||
<el-option | |||
v-for="opt in typeList" | |||
:key="opt.value" | |||
:label="opt.label" | |||
:value="opt.value" /> | |||
</el-select> | |||
</el-form-item> | |||
<el-form-item label="检测内容" prop="content"> | |||
@@ -52,7 +56,6 @@ | |||
</el-form-item> | |||
</el-form> | |||
</base-dialog> | |||
</div> | |||
</template> | |||
@@ -66,11 +69,14 @@ import { | |||
exportQualityInspectionDetExcel, | |||
} from '@/api/base/qualityInspectionDet'; | |||
import moment from 'moment'; | |||
export default { | |||
name: 'QualityInspectionDet', | |||
components: {}, | |||
data() { | |||
return { | |||
typeList: [], // 检测类型列表 | |||
searchBarFormConfig: [ | |||
{ | |||
type: 'input', | |||
@@ -124,15 +130,19 @@ export default { | |||
// }, | |||
], | |||
tableBtn: [ | |||
this.$auth.hasPermi('base:quality-inspection-det:update') ? { | |||
type: 'edit', | |||
btnName: '修改', | |||
} : undefined, | |||
this.$auth.hasPermi('base:quality-inspection-det:delete') ? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} : undefined, | |||
].filter(v=>v), | |||
this.$auth.hasPermi('base:quality-inspection-det:update') | |||
? { | |||
type: 'edit', | |||
btnName: '修改', | |||
} | |||
: undefined, | |||
this.$auth.hasPermi('base:quality-inspection-det:delete') | |||
? { | |||
type: 'delete', | |||
btnName: '删除', | |||
} | |||
: undefined, | |||
].filter((v) => v), | |||
tableData: [], | |||
tableProps: [ | |||
{ | |||
@@ -183,6 +193,7 @@ export default { | |||
}, | |||
created() { | |||
this.getList(); | |||
this.getTypeList(); | |||
}, | |||
methods: { | |||
/** base table related */ | |||
@@ -226,6 +237,19 @@ export default { | |||
handleEmitFun(val) { | |||
console.log('emit unf', val); | |||
}, | |||
/** 获取检测类型id */ | |||
getTypeList() { | |||
this.$axios('/base/quality-inspection-type/listAll').then( | |||
(response) => { | |||
this.typeList = response.data.map((item) => { | |||
return { | |||
label: item.name, | |||
value: item.id, | |||
}; | |||
}); | |||
} | |||
); | |||
}, | |||
/** 查询列表 */ | |||
getList() { | |||
this.loading = true; | |||
@@ -266,7 +290,7 @@ export default { | |||
handleAdd() { | |||
this.reset(); | |||
this.open = true; | |||
this.title = '添加质量检测信息基础'; | |||
this.title = '添加质量检测信息'; | |||
}, | |||
/** 修改按钮操作 */ | |||
handleUpdate(row) { | |||
@@ -275,7 +299,7 @@ export default { | |||
getQualityInspectionDet(id).then((response) => { | |||
this.form = response.data; | |||
this.open = true; | |||
this.title = '修改质量检测信息基础'; | |||
this.title = '修改质量检测信息'; | |||
}); | |||
}, | |||
/** 提交按钮 */ | |||
@@ -336,3 +360,9 @@ export default { | |||
}, | |||
}; | |||
</script> | |||
<style> | |||
.el-select { | |||
width: 100% !important; | |||
} | |||
</style> |
@@ -0,0 +1,137 @@ | |||
<!-- | |||
filename: dialogForm.vue | |||
author: liubin | |||
date: 2023-08-02 10:32:36 | |||
description: 弹窗的表单组件 | |||
--> | |||
<template> | |||
<el-form | |||
ref="form" | |||
:model="form" | |||
:rules="rules" | |||
label-width="`${labelWidth}px`" | |||
v-loading="formLoading"> | |||
<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-form-item :label="col.label" :prop="col.prop"> | |||
<el-input | |||
v-if="col.input" | |||
v-model="form[col.prop]" | |||
@change="$emit('update', form)" | |||
rules="col.rules" | |||
v-bind="col.bind" /> | |||
<el-select | |||
v-if="col.select" | |||
v-model="form[col.prop]" | |||
v-bind="col.bind"> | |||
<el-option | |||
v-for="opt in optionListOf[col.prop]" | |||
:key="opt.value" | |||
:label="opt.label" | |||
:value="opt.value" /> | |||
</el-select> | |||
</el-form-item> | |||
</el-col> | |||
</el-row> | |||
</el-form> | |||
</template> | |||
<script> | |||
/** | |||
* 找到最长的label | |||
* @param {*} options | |||
*/ | |||
function findMaxLabelWidth(options) { | |||
let max = 0; | |||
options.forEach((opt) => { | |||
if (opt.label.length > max) { | |||
max = opt.label.length; | |||
} | |||
}); | |||
return max; | |||
} | |||
export default { | |||
name: 'DialogForm', | |||
model: { | |||
prop: 'dataForm', | |||
event: 'update', | |||
}, | |||
emits: ['update'], | |||
components: {}, | |||
props: { | |||
options: { | |||
type: Array, | |||
default: () => [], | |||
}, | |||
dataForm: { | |||
type: Object, | |||
default: () => ({}), | |||
}, | |||
}, | |||
data() { | |||
return { | |||
formLoading: false, | |||
optionListOf: {}, | |||
}; | |||
}, | |||
computed: { | |||
labelWidth() { | |||
let max = findMaxLabelWidth(this.options); | |||
// 每个汉字占20px | |||
return max * 20; | |||
}, | |||
form: { | |||
get() { | |||
return this.dataForm; | |||
}, | |||
set(val) { | |||
console.log('set form', val); | |||
// this.$emit('update', val); | |||
}, | |||
}, | |||
}, | |||
mounted() { | |||
// 处理 options | |||
this.handleOptions(); | |||
}, | |||
methods: { | |||
handleOptions() { | |||
this.formLoading = true; | |||
const promiseList = []; | |||
this.options.forEach(async (opt) => { | |||
if (opt.options) { | |||
this.optionListOf[opt.prop] = opt.options; | |||
} else if (opt.url) { | |||
promiseList.push(async () => { | |||
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'], | |||
})) | |||
); | |||
}); | |||
try { | |||
await Promise.all(promiseList); | |||
this.formLoading = false; | |||
} catch (error) { | |||
console.log('[dialogForm:handleOptions:error]', error); | |||
this.formLoading = false; | |||
} | |||
} | |||
}); | |||
}, | |||
}, | |||
}; | |||
</script> | |||
<style scoped lang="scss"></style> |
@@ -0,0 +1,87 @@ | |||
export default { | |||
data() { | |||
return { | |||
// 遮罩层 | |||
loading: true, | |||
// 导出遮罩层 | |||
exportLoading: false, | |||
// 显示搜索条件 | |||
showSearch: true, | |||
// 总条数 | |||
total: 0, | |||
// 质量检测信息基础列表 | |||
list: [], | |||
// 弹出层标题 | |||
title: '', | |||
// 是否显示弹出层 | |||
open: false, | |||
// 查询参数 | |||
queryParams: { | |||
pageNo: 1, | |||
pageSize: 10, | |||
}, | |||
// 列表数据 | |||
tableData: [], | |||
tableProps: [], // 占位 | |||
tableBtn: [], // 占位 | |||
searchBarFormConfig: [], // 占位 | |||
// 弹窗表单配置 | |||
dialogFormConfig: [], // 占位 | |||
}; | |||
}, | |||
mounted() { | |||
if (this.prepareSelectOptions) { | |||
// 准备列表的options | |||
// TODO: 也许需要挪到 dialogForm.vue 里 | |||
this.prepareSelectOptions(); | |||
} | |||
}, | |||
methods: { | |||
// 处理搜索条件 | |||
handleSearchBarBtnClick() {}, | |||
// 处理表格按钮 | |||
handleTableBtnClick({ data, type }) { | |||
switch (type) { | |||
case 'edit': | |||
this.handleUpdate(data); | |||
break; | |||
case 'delete': | |||
this.handleDelete(data); | |||
break; | |||
} | |||
}, | |||
// 处理搜索栏按钮 | |||
handleSearchBarBtnClick(btn) { | |||
const keys = ['name', 'createTime']; // timeVal | |||
switch (btn.btnName) { | |||
case 'search': | |||
keys.forEach((key) => { | |||
if (key == 'timeVal') { | |||
this.queryParams['startTime'] = btn.timeVal[0]; | |||
this.queryParams['endTime'] = btn.timeVal[1]; | |||
return; | |||
} | |||
this.queryParams[key] = btn[key] || null; | |||
}); | |||
this.handleQuery(); | |||
break; | |||
case 'add': | |||
this.handleAdd(); | |||
break; | |||
case 'export': | |||
this.handleExport(); | |||
break; | |||
case 'reset': | |||
this.$refs['search-bar'].resetForm(); | |||
this.resetQuery(); | |||
break; | |||
} | |||
}, | |||
handleEmitFun(val) { | |||
console.log('emit unf', val); | |||
}, | |||
// 获取列表数据 | |||
getList() {}, | |||
}, | |||
}; |