电能质量问题-用户投诉联调

src/views/pqs/supervise/electricalEnergy/components1/form/complaintsForm.vue

@@ -1,45 +1,119 @@
 <template>
-    <el-dialog draggable v-model="dialogVisible" :title="title" style="width: 1100px" :before-close="handleClose">
-        <el-form :model="userAdddata" :inline="true" ref="userAddRef" :rules="rules">
-            <el-form-item label="用户名称:" prop="userName">
-                <el-input v-model="userAdddata.userName" clearable placeholder="请输入用户名称"></el-input>
-            </el-form-item>
-            <el-form-item label="用户编号:" prop="userNo">
-                <el-input v-model="userAdddata.userNo" clearable placeholder="请输入用户编号"></el-input>
-            </el-form-item>
+    <el-dialog draggable v-model="dialogVisible" :title="title" style="width: 55%" :before-close="handleClose">
+        <el-form
+            :model="form"
+            ref="formRef"
+            :rules="rules"
+            label-width="140px"
+            label-position="right"
+            :scroll-to-error="true"
+        >
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="用户名称:" style="margin-top: 10px" prop="userName">
+                        <el-input
+                            v-model="form.userName"
+                            clearable
+                            style="width: 100%"
+                            placeholder="请输入用户名称"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+                <!-- <el-col :span="12">
+                    <el-form-item label="用户类别:" style="margin-top: 10px" prop="userCategory">
+                        <el-select
+                            v-model="form.userCategory"
+                            clearable
+                            style="width: 100%"
+                            placeholder="请选择用户类别"
+                        >
+                            <el-option
+                                v-for="item in monitorTypeList"
+                                :key="item.id"
+                                :label="item.name"
+                                :value="item.id"
+                            ></el-option>
+                        </el-select>
+                    </el-form-item>
+                </el-col> -->
+                <el-col :span="12">
+                    <el-form-item label="用户编号:" style="margin-top: 10px" prop="userNumber">
+                        <el-input
+                            v-model="form.userNumber"
+                            clearable
+                            style="width: 100%"
+                            placeholder="请输入用户编号"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row>
+                <el-col :span="12">
+                    <el-form-item label="是否实现监测:" style="margin-top: 10px" prop="status">
+                        <el-radio-group v-model="form.status">
+                            <el-radio value="0">否</el-radio>
+                            <el-radio value="1">是</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
+                </el-col>
+                <el-col v-if="form.status == '1'" :span="12">
+                    <el-form-item label="监测点名称:" style="margin-top: 10px" prop="monitorName">
+                        <el-input
+                            v-model="form.monitorName"
+                            clearable
+                            style="width: 100%"
+                            placeholder="请输入监测点名称"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row v-if="form.status == '1'">
+                <el-col :span="12">
+                    <el-form-item label="监测点编号:" style="margin-top: 10px" prop="monitorNumber">
+                        <el-input
+                            v-model="form.monitorNumber"
+                            clearable
+                            style="width: 100%"
+                            placeholder="请输入监测点编号"
+                        ></el-input>
+                    </el-form-item>
+                </el-col>
+            </el-row>
 
-            <el-form-item label="投诉内容:" style="margin-top: 10px" prop="complaintContent">
+            <el-form-item label="投诉内容:" style="margin-top: 10px" prop="complaintText">
                 <el-input
                     type="textarea"
-                    style="width: 400px"
                     :autosize="{ minRows: 2, maxRows: 4 }"
                     placeholder="请输入内容"
-                    v-model="userAdddata.complaintContent"
+                    v-model="form.complaintText"
                 ></el-input>
             </el-form-item>
-            <br />
-            <el-form-item label="投诉时间:" style="margin-top: 10px" prop="complaintTime">
-                <el-date-picker
-                    v-model="userAdddata.complaintTime"
-                    type="date"
-                    placeholder="选择日期"
-                    value-format="YYYY-MM-DD"
-                ></el-date-picker>
-            </el-form-item>
-
-            <el-form-item label="稳态指标:" prop="steadyState">
-                <el-checkbox-group v-model="userAdddata.steadyState">
-                    <el-checkbox v-for="(item, ind) in steadyStateList" :key="ind" :label="item.code">
-                        {{ item.name }}
-                    </el-checkbox>
+            <el-form-item label="稳态指标:" style="margin-top: 10px" prop="steadyIndicator">
+                <el-checkbox-group v-model="form.steadyIndicator">
+                    <div style="width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start">
+                        <el-checkbox
+                            style="flex: none; width: 120px"
+                            v-for="(item, ind) in steadyStateList"
+                            :key="ind"
+                            :label="item.name"
+                        >
+                            {{ item.name }}
+                        </el-checkbox>
+                    </div>
                 </el-checkbox-group>
             </el-form-item>
-            <br />
-            <el-form-item label="暂态指标:" prop="transientIndicators">
-                <el-checkbox-group v-model="userAdddata.transientIndicators">
-                    <el-checkbox v-for="(item, ind) in transientIndicatorsList" :key="ind" :label="item.code">
-                        {{ item.name }}
-                    </el-checkbox>
+            <el-form-item label="暂态指标:" style="margin-top: 10px" prop="transientIndicators">
+                <el-checkbox-group v-model="form.transientIndicators">
+                    <div style="width: 100%; display: flex; flex-wrap: wrap; justify-content: flex-start">
+                        <el-checkbox
+                            style="flex: none; width: 120px"
+                            v-for="(item, ind) in transientIndicatorsList"
+                            :key="ind"
+                            :label="item.name"
+                        >
+                            {{ item.name }}
+                        </el-checkbox>
+                    </div>
                 </el-checkbox-group>
             </el-form-item>
         </el-form>
@@ -52,38 +126,55 @@
     </el-dialog>
 </template>
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref,defineEmits } from 'vue'
 import { useDictData } from '@/stores/dictData'
-const emit = defineEmits(['onsubmit'])
+import { addComplaintsData } from '@/api/process-boot/electricitymanagement'
+const emits = defineEmits(['onSubmit'])
 const dictData = useDictData()
 const dialogVisible = ref(false)
 const title: any = ref('')
 const steadyStateList = dictData.getBasicData('Steady_Indicator')
 const transientIndicatorsList = dictData.getBasicData('Transient_Indicators')
-
-const userAdddata = ref({
-    complaintContent: '',
-    complaintTime: '',
-    steadyState: [],
-    userName: '',
-    userNo: '',
-    transientIndicators: []
+const form = ref({
+    complaintText: '', //投诉内容
+    status: '0', //是否实现监测
+    steadyIndicator: [], //稳态指标
+    transientIndicators: [], //暂态指标
+    userName: '', //用户名称
+    userNumber: '', //用户编号
+    userCategory: '', //用户类别
+    monitorName: '', //监测点名称
+    monitorNumber: '' //监测点编号
 })
 const rules = {
-    problemName: [{ required: true, message: '请输入问题名称', trigger: 'blur' }],
     userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
-    userNo: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
-    complaintContent: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
-    complaintTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
-    problemSources: [{ required: true, message: '情选择问题来源', trigger: 'change' }],
-    abnormalDevTime: [{ required: true, message: '请选择时间', trigger: 'change' }],
+    userNumber: [{ required: true, message: '请输入用户编号', trigger: 'blur' }],
+    userCategory: [{ required: true, message: '请选择用户类别', trigger: 'change' }],
+    complaintText: [{ required: true, message: '请输入投诉内容', trigger: 'blur' }],
+    status: [{ required: true, message: '请选择是否实现监测', trigger: 'change' }],
     transientIndicators: [{ required: true, message: '请选择暂态指标', trigger: 'change' }],
-    steadyState: [{ required: true, message: '请选择稳态指标', trigger: 'change' }],
-    eventDescription: [{ required: true, message: '请输入设备异常描述', trigger: 'blur' }],
-    abnormalDevName: [{ required: true, message: '请输入问题名称', trigger: 'blur' }]
+    steadyIndicator: [{ required: true, message: '请选择稳态指标', trigger: 'change' }],
+    monitorName: [{ required: true, message: '请输入监测点名称', trigger: 'blur' }],
+    monitorNumber: [{ required: true, message: '请输入监测点编号', trigger: 'blur' }],
 }
+const formRef = ref(null)
 const submit = () => {
-    handleClose()
+    formRef.value.validate(valid => {
+        if (valid) {
+            form.value = {
+                ...form.value,
+                steadyIndicator: form.value.steadyIndicator.join(','),
+                transientIndicators: form.value.transientIndicators.join(',')
+            }
+            addComplaintsData(form.value).then(res => {
+                emits('onSubmit')
+                handleClose()
+            })
+        } else {
+            console.log('表单验证失败')
+            return false
+        }
+    })
 }
 
 const open = (row: any) => {
@@ -98,7 +189,10 @@ const handleClose = () => {
 defineExpose({ open })
 </script>
 <style lang="scss" scoped>
-:deep(.el-upload-list__item) {
-    width: 400px;
+.el-form {
+    width: 96%;
+    margin: 0 auto;
+    height: 400px;
+    margin-top: 20px;
 }
 </style>