<template>
|
<a-spin :spinning="confirmLoading">
|
<j-form-container :disabled="disabled" class="andon-response-form">
|
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
|
|
<!-- 产线选择 -->
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="产线" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="factoryId">
|
<a-tree-select
|
:disabled="disabled"
|
v-model="model.factoryId"
|
:tree-data="factoryTreeData"
|
:allow-clear="true"
|
:show-search="false"
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
:tree-check-strictly="true"
|
placeholder="请选择"
|
style="width: 100%"
|
@change="handleFactoryChange"
|
class="custom-tree-select">
|
<template slot="title" slot-scope="item">
|
{{ item.title }}
|
</template>
|
</a-tree-select>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<!-- 安灯类型和响应人配置 -->
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="安灯类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="buttonId">
|
<j-search-select-tag
|
v-model="model.buttonId"
|
placeholder="请选择"
|
dict="andon_button_config,button_name,id"
|
></j-search-select-tag>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="初始响应人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="firstResponder">
|
<j-select-user-by-dep
|
:multi="false"
|
v-model="model.firstResponder"
|
placeholder="请选择"
|
></j-select-user-by-dep>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="二级响应人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="secondResponder">
|
<j-select-user-by-dep
|
:multi="false"
|
v-model="model.secondResponder"
|
placeholder="请选择"
|
></j-select-user-by-dep>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="三级响应人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="thirdResponder">
|
<j-select-user-by-dep
|
:multi="false"
|
v-model="model.thirdResponder"
|
placeholder="请选择"
|
></j-select-user-by-dep>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</j-form-container>
|
</a-spin>
|
</template>
|
|
<script>
|
import { httpAction, getAction } from '@/api/manage'
|
import { TreeSelect } from 'ant-design-vue'
|
|
export default {
|
name: 'AndonResponseConfigForm',
|
components: {
|
'a-tree-select': TreeSelect
|
},
|
props: {
|
disabled: {
|
type: Boolean,
|
default: false
|
}
|
},
|
data() {
|
return {
|
model: {
|
factoryId: '',
|
buttonId: '',
|
firstResponder: '',
|
secondResponder: '',
|
thirdResponder: ''
|
},
|
factoryTreeData: [],
|
labelCol: { xs: { span: 24 }, sm: { span: 6 } },
|
wrapperCol: { xs: { span: 24 }, sm: { span: 18 } },
|
confirmLoading: false,
|
validatorRules: {
|
factoryId: [{ required: true, message: '产线是必选项', trigger: 'change' }],
|
buttonId: [{ required: true, message: '安灯类型是必选项', trigger: 'change' }],
|
firstResponder: [{ required: true, message: '初始响应人是必选项', trigger: 'change' }],
|
secondResponder: [{ required: true, message: '二级响应人是必选项', trigger: 'change' }],
|
thirdResponder: [{ required: true, message: '三级响应人是必选项', trigger: 'change' }]
|
},
|
url: {
|
add: "/andonresponseconfig/andonResponseConfig/add",
|
edit: "/andonresponseconfig/andonResponseConfig/edit",
|
factoryTree: "/base/factory/queryTreeList"
|
}
|
}
|
},
|
created() {
|
this.modelDefault = { ...this.model }
|
this.loadFactoryTree()
|
},
|
methods: {
|
loadFactoryTree() {
|
this.confirmLoading = true
|
getAction(this.url.factoryTree)
|
.then(res => {
|
if (res.success && Array.isArray(res.result)) {
|
this.factoryTreeData = this.transformData(res.result)
|
console.log('产线数据加载成功：', this.factoryTreeData)
|
} else {
|
this.$message.warning('产线数据为空或格式异常')
|
this.factoryTreeData = []
|
}
|
})
|
.catch(err => {
|
console.error('产线数据加载失败：', err)
|
this.$message.error('加载产线数据失败，请重试')
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
})
|
},
|
|
transformData(nodes) {
|
return nodes.map(node => ({
|
key: node.id,
|
title: node.factoryName,
|
value: node.id,
|
children: node.children && node.children.length > 0 ? this.transformData(node.children) : []
|
}))
|
},
|
|
handleFactoryChange(value) {
|
this.model.factoryId = value
|
},
|
|
add() {
|
this.model = { ...this.modelDefault }
|
this.visible = true
|
},
|
edit(record) {
|
this.model = { ...record }
|
this.visible = true
|
},
|
|
submitForm() {
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
this.confirmLoading = true
|
const httpurl = this.model.id ? this.url.edit : this.url.add
|
const method = this.model.id ? 'put' : 'post'
|
|
httpAction(httpurl, this.model, method)
|
.then(res => {
|
if (res.success) {
|
this.$message.success(res.message)
|
this.$emit('ok')
|
} else {
|
this.$message.warning(res.message)
|
}
|
})
|
.finally(() => {
|
this.confirmLoading = false
|
})
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.andon-response-form {
|
padding: 24px;
|
background: #fff;
|
border-radius: 8px;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
}
|
.a-form-model-item {
|
margin-bottom: 20px !important;
|
}
|
.ant-tree-select-selection {
|
min-height: 32px !important;
|
}
|
|
/* 树形选择组件自定义样式 */
|
.custom-tree-select {
|
/* 调整下拉菜单宽度，使其更适配内容 */
|
& .ant-tree-select-dropdown .ant-tree-select-tree {
|
width: 220px;
|
}
|
/* 节点 hover 效果 */
|
& .ant-tree-select-tree-node:hover {
|
background-color: #e6f7ff !important;
|
}
|
/* 节点选中效果 */
|
& .ant-tree-select-tree-node-selected {
|
background-color: #bae7ff !important;
|
}
|
/* 调整字体大小和行高 */
|
& .ant-tree-select-tree-title {
|
font-size: 14px;
|
line-height: 24px;
|
}
|
/* 调整缩进，优化层级视觉效果 */
|
& .ant-tree-select-tree-indent {
|
width: 16px;
|
}
|
}
|
</style>
|
