- <template>
- <div class="water-analysis-page">
- <div class="top">
- <el-form label-width="auto" :rules="deviceInfoRules" inline ref="ruleForm" :model="FormList" :disabled="typeList.type == 1">
- <el-form-item
- :label="i.label"
- :style="{ width: i.prop == 'remark' ? '93%' : '45%' }"
- :prop="i.prop"
- v-for="i in deviceInfoForm"
- :disabled="typeList.type == 1 || typeList.type == 2"
- >
- <el-select
- style="width: 100%"
- clearable
- v-model="FormList.stationName"
- v-if="i.prop == 'stationName'"
- @change="stationNameChange"
- :placeholder="i.placeholder"
- >
- <el-option
- v-for="dict in typeLista.stationName_type"
- :key="dict.stationCode"
- :label="dict.stationName"
- :value="dict.stationCode"
- />
- </el-select>
- <el-select
- style="width: 100%"
- clearable
- v-model="FormList.areaCode"
- v-else-if="i.prop == 'areaCode'"
- :placeholder="i.placeholder"
- >
- <el-option v-for="dict in typeLista.areaName_type" :key="dict.stationCode" :label="dict.areaName" :value="dict.areaCode" />
- </el-select>
- <el-select
- style="width: 100%"
- clearable
- v-model="FormList.deviceType"
- v-else-if="i.prop == 'deviceType'"
- :placeholder="i.placeholder"
- >
- <el-option v-for="item in device_type" :key="item.value" :label="item.label" :value="item.value" />
- </el-select>
- <el-radio-group v-model="FormList.status" class="ml-4" v-else-if="i.prop == 'status'">
- <el-radio style="margin-top: -5px" label="1" size="large">启用</el-radio>
- <el-radio style="margin-top: -5px" label="0" size="large">停用</el-radio>
- </el-radio-group>
- <el-input
- v-else
- v-model="FormList[i.prop]"
- :placeholder="i.placeholder"
- :disabled="i.prop == 'stationCode' || (i.prop == 'deviceCode' && typeList.type == 2)"
- :type="i.prop == 'remark' ? 'textarea' : ''"
- >
- <template #append v-if="i.prop == 'budget'"> 万元 </template>
- </el-input>
- </el-form-item>
- <el-form-item label="图片:">
- <ImageFileUpload :limit="3" :saveFileArr="FormList.fileSaveRequestList" :listType="'picture-card'" />
- </el-form-item>
- </el-form>
- </div>
- </div>
- </template>
- <script setup>
- import { stationInfolist, areaInfolist } from '@/api/scada/areaInfo';
- import { projectInfoAdd, projectInfoEdit } from '@/api/scada/deviceInfo';
- import { getToken } from '@/utils/auth';
- import { deviceInfoRules } from '@/utils/rules';
- import { deviceInfoForm } from '@/utils/form';
- import ImageFileUpload from '@/components/ImageFileUpload/index.vue'; //图片文件上传
- const { proxy } = getCurrentInstance();
- const { device_type } = proxy.useDict('device_type');
- const uploadHeader = ref({
- Authorization: 'Bearer ' + getToken(),
- });
- const { typeList } = defineProps(['typeList']);
- const ProjectListData = ref([]);
- const typeLista = ref({});
- const emits = defineEmits();
- defineExpose({ submit, closed, resetFiled });
- let FormList = ref({ projectNo: '', fileSaveRequestList: [], status: '1' });
- const fileList1 = ref([]);
- function submit() {
- proxy.$refs.ruleForm.validate(valid => {
- if (valid) {
- if (typeList.type == 4) {
- projectInfoAdd(FormList.value).then(({ code }) => {
- if (code == 200) {
- proxy.$modal.msgSuccess('新增成功');
- emits('onModalClose');
- }
- });
- } else {
- projectInfoEdit(FormList.value).then(({ code }) => {
- if (code == 200) {
- proxy.$modal.msgSuccess('修改成功');
- emits('onModalClose');
- }
- });
- }
- }
- });
- }
- function resetFiled() {
- proxy.$refs.ruleForm.resetFields();
- FormList.value.fileSaveRequestList = [];
- fileList1.value = [];
- }
- function closed() {
- emits('onModalClose');
- }
- function stationNameChange(v) {
- FormList.value.stationCode = v;
- FormList.value.areaCode = '';
- areaInfolistM({ stationCode: v });
- }
- const stationInfolistM = async () => {
- let { data } = await stationInfolist();
- typeLista.value.stationName_type = data;
- };
- const areaInfolistM = async p => {
- let { data } = await areaInfolist(p);
- typeLista.value.areaName_type = data;
- };
- onMounted(() => {
- FormList.value = typeList;
- FormList.value.stationName = typeList.stationCode;
- stationInfolistM();
- areaInfolistM({ stationCode: typeList.stationCode });
- // loadProjerctListData();
- });
- </script>
- <style lang="scss" scoped>
- .water-analysis-page {
- padding: 10px;
- }
- </style>