mt-fe-group
/
yudao-dev
11
0
포크 0
코드 이슈 0 풀 리퀘스트 0 릴리즈 0 위키 활동
소스 검색

update 完成dialogForm的字段监听更新逻辑

pull/12/head
lb 1 년 전
부모
61a6e7dafb
커밋
bd56b12560
3개의 변경된 파일과 194개의 추가작업 그리고 203개의 파일을 삭제
분할 보기
Diff Options
Show Stats Download Patch File Download Diff File
  1. +64
    -74
      src/views/quality/base/qualityInspectionBoxBtn/index.vue
  2. +30
    -28
      src/views/quality/components/dialogForm.vue
  3. +100
    -101
      src/views/quality/monitoring/qualityInspectionRecord/index.vue

+ 64
- 74
src/views/quality/base/qualityInspectionBoxBtn/index.vue 파일 보기

@@ -38,80 +38,7 @@
@close="cancel"
@cancel="cancel"
@confirm="submitForm">
<DialogForm
v-if="open"
ref="form"
:dataForm="form"
:rows="[
[
{
select: true,
label: '产线',
url: '/base/production-line/listAll',
prop: 'productionId',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
bind: {
filterable: true,
},
},
],
[
{
select: true,
label: '工段',
url: '/base/workshop-section/listAll',
prop: 'sectionId',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
// {
// select: true,
// url: '', //
// label: '检测内容',
// prop: 'inspectionDetContent',
// rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
// },
],
[
{
input: true,
label: '按钮盒识别码',
prop: 'buttonId',
rules: [
{
type: 'number',
message: '请输入数字',
trigger: 'blur',
transform: (val) => Number(val),
},
],
},
],
[{ input: true, label: '按钮盒模式', prop: 'model' }],
[
{
input: true,
label: '按钮值',
prop: 'keyValue',
rules: [
{
type: 'number',
message: '请输入100以内的数字',
trigger: 'blur',
transform: (val) => Number(val) <= 100 && Number(val),
},
],
bind: { type: 'number', min: 0, max: 100 },
},
],
[
{
textarea: true,
label: '检测内容',
prop: 'inspectionDetContent',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
]" />
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
</base-dialog>
</div>
</template>
@@ -134,6 +61,69 @@ export default {
components: {},
data() {
return {
rows: [
[
{
select: true,
label: '产线',
url: '/base/production-line/listAll',
prop: 'productionId',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
bind: {
filterable: true,
},
},
],
[
{
select: true,
label: '工段',
url: '/base/workshop-section/listAll',
prop: 'sectionId',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
[
{
input: true,
label: '按钮盒识别码',
prop: 'buttonId',
rules: [
{
type: 'number',
message: '请输入数字',
trigger: 'blur',
transform: (val) => Number(val),
},
],
},
],
[{ input: true, label: '按钮盒模式', prop: 'model' }],
[
{
input: true,
label: '按钮值',
prop: 'keyValue',
rules: [
{
type: 'number',
message: '请输入100以内的数字',
trigger: 'blur',
transform: (val) => Number(val) <= 100 && Number(val),
},
],
bind: { type: 'number', min: 0, max: 100 },
},
],
[
{
textarea: true,
label: '检测内容',
prop: 'inspectionDetContent',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
],
searchBarFormConfig: [
{
type: 'input',


+ 30
- 28
src/views/quality/components/dialogForm.vue 파일 보기

@@ -108,6 +108,18 @@ export default {
},
},
},
watch: {
rows: {
handler() {
console.log('watch triggered!');
this.$nextTick(() => {
this.handleOptions('watch');
});
},
deep: true,
immediate: false,
},
},
mounted() {
// 处理 options
this.handleOptions();
@@ -125,32 +137,18 @@ export default {
const response = await this.$axios(url);
return response.data;
},
handleOptions() {
async handleOptions(trigger = 'monuted') {
// console.log("[dialogForm:handleOptions]")
const promiseList = [];
this.rows.forEach((cols) => {
cols.forEach(async (opt) => {
if (opt.onChange) {
this.$watch(`form.${opt.prop}`, {
handler: (val) => {
this.$emit(opt.onChange.emit, val);
},
immediate: true,
});
}
if (opt.listen) {
// 注册监听时间
this.$on(opt.listen, (val) => {
alert(val);
});
}
if (opt.value) {
cols.forEach((opt) => {
if (opt.value && !this.form[opt.prop]) {
// 默认值
this.form[opt.prop] = opt.value;
}

if (opt.options) {
this.optionListOf[opt.prop] = opt.options;
this.$set(this.optionListOf, opt.prop, opt.options);
} else if (opt.url) {
// 如果是下拉框，或者新增模式下的输入框，才去请求
if (opt.select || (opt.input && !this.form?.id)) {
@@ -179,19 +177,23 @@ export default {
}
});
}
try {
// this.formLoading = true;
// console.log("[dialogForm:handleOptions:promiseList]", promiseList)
await Promise.all(promiseList.map((fn) => fn()));
this.formLoading = false;
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
} catch (error) {
console.log('[dialogForm:handleOptions:error]', error);
this.formLoading = false;
}
}
});
});

// 如果是 watch 触发的，不需要执行进一步的请求
if (trigger == 'watch') {
this.formLoading = false;
return;
}
try {
await Promise.all(promiseList.map((fn) => fn()));
this.formLoading = false;
// console.log("[dialogForm:handleOptions:optionListOf]", this.optionListOf)
} catch (error) {
console.log('[dialogForm:handleOptions:error]', error);
this.formLoading = false;
}
if (!promiseList.length) this.formLoading = false;
},
},


+ 100
- 101
src/views/quality/monitoring/qualityInspectionRecord/index.vue 파일 보기

@@ -38,107 +38,7 @@
@close="cancel"
@cancel="cancel"
@confirm="submitForm">
<DialogForm
v-if="open"
ref="form"
:dataForm="form"
:rows="[
[
{
select: true,
label: '检测内容ID',
url: '/base/quality-inspection-det/listAll',
prop: 'inspectionDetId',
labelKey: 'content',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
bind: {
filterable: true,
},
},
{
select: true,
label: '来源',
prop: 'source',
value: 1, // 默认手动
options: [
{ label: '手动', value: 1 },
{ label: '自动', value: 2 },
],
bind: {
filterable: true,
},
},
// {
// input: true,
// label: '',
// prop: 'buttonId',
// rules: [
// {
// type: 'number',
// message: '请输入数字',
// trigger: 'blur',
// transform: (val) => Number(val),
// },
// ],
// },
],
[
// 此方案必须，工段（含listen）字段必须在产线字段（含onChange）之前
{
select: true,
label: '工段',
url: '/base/workshop-section/listAll',
prop: 'sectionId',
listen: 'productionLineChange', // 对应上面 emit
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
{
select: true,
label: '产线',
url: '/base/production-line/listAll',
prop: 'productionLineId',
onChange: { emit: 'productionLineChange' },
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
[
{
input: true,
label: '检测人员',
prop: 'checkPerson',
rules: [
// {
// type: 'number',
// message: '请输入数字',
// trigger: 'blur',
// transform: (val) => Number(val),
// },
],
},
{
datetime: true,
label: '检测时间',
prop: 'checkTime',
bind: {
format: 'yyyy-MM-dd HH:mm:ss',
'value-format': 'timestamp',
// 'value-format': 'yyyy-MM-dd HH:mm:ss',
clearable: true,
},
},
],
[
{
textarea: true,
label: '检测内容',
prop: 'inspectionDetContent',
value: '',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
[{ textarea: true, label: '描述', prop: 'explainText' }],
[{ input: true, label: '备注', prop: 'remark' }],
]" />
<DialogForm v-if="open" ref="form" :dataForm="form" :rows="rows" />
</base-dialog>
</div>
</template>
@@ -164,6 +64,80 @@ export default {
mixins: [basicPageMixin],
data() {
return {
rows: [
[
{
select: true,
label: '检测内容ID',
url: '/base/quality-inspection-det/listAll',
prop: 'inspectionDetId',
labelKey: 'content',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
bind: {
filterable: true,
},
},
{
select: true,
label: '来源',
prop: 'source',
value: 1, // 默认手动
options: [
{ label: '手动', value: 1 },
{ label: '自动', value: 2 },
],
bind: {
filterable: true,
},
},
],
[
{
select: true,
label: '产线',
url: '/base/production-line/listAll',
prop: 'productionLineId',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
{
select: true,
label: '工段',
url: '/base/workshop-section/listAll', // 这个 url 其实可加可不加，因为下面会更新 options
options: [], // 这个options也可加可不加, 因为下面会更新 options
prop: 'sectionId',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
[
{
input: true,
label: '检测人员',
prop: 'checkPerson',
},
{
datetime: true,
label: '检测时间',
prop: 'checkTime',
bind: {
format: 'yyyy-MM-dd HH:mm:ss',
'value-format': 'timestamp',
// 'value-format': 'yyyy-MM-dd HH:mm:ss',
clearable: true,
},
},
],
[
{
textarea: true,
label: '检测内容',
prop: 'inspectionDetContent',
value: '',
rules: [{ required: true, message: '不能为空', trigger: 'blur' }],
},
],
[{ textarea: true, label: '描述', prop: 'explainText' }],
[{ input: true, label: '备注', prop: 'remark' }],
],
searchBarFormConfig: [
{
type: 'select',
@@ -296,6 +270,31 @@ export default {
this.getList();
this.getProductLineList();
},
watch: {
// 注册弹窗里产线改变时的监听事件
'form.productionLineId': {
handler: function (val) {
if (val == null) return;
this.$axios('/base/workshop-section/listByParentId', {
params: {
id: val,
},
}).then((response) => {
this.$set(
this.rows[1][1], // 这里索引是硬编码，所以当 this.rows 里数据顺序改变时，此处也要改
'options',
response.data.map((item) => {
return {
label: item.name,
value: item.id,
};
})
);
});
},
immediate: true,
},
},
methods: {
/** 获取搜索栏的产线列表 */
getProductLineList() {


쓰기 미리보기
불러오는 중...
취소
저장