yjdp-web/src/views/globalMap/RightMenu/OnlinePlotting/EditClassDialog.vue

<template>
  <Dialog custom-show draggable :title="!id ? '新增分类' : '修改分类'" @close="handleCancel" @confirm="submitForm(classFormRef)">
    <el-form ref="classFormRef" :model="form" :rules="rules">
      <el-form-item label="分类名称:" label-width="200px" prop="name">
        <el-input v-model="form.name" class="custom-input2" placeholder="请输入分类名称" />
      </el-form-item>
      <el-form-item label="分类值:" label-width="200px" prop="value">
        <el-input v-model="form.value" class="custom-input2" placeholder="请输入分类值" />
      </el-form-item>
      <el-form-item label="图标:" label-width="200px" prop="fileList">
        <FileUpload v-model="form.fileList" :file-type="['jpg', 'jpeg', 'png']" :limit="1" :file-size="20" :is-show-tip="false" class="upload-box" />
      </el-form-item>
      <el-form-item v-if="form.value === 'marker'" label="图标宽度:" label-width="200px" prop="size.0">
        <el-input v-model="form.size[0]" class="custom-input2" placeholder="请输入图标宽度" />
      </el-form-item>
      <el-form-item v-if="form.value === 'marker'" label="图标高度:" label-width="200px" prop="size.1">
        <el-input v-model="form.size[1]" class="custom-input2" placeholder="请输入图标高度" />
      </el-form-item>
      <el-form-item label="排序:" label-width="200px" prop="order_num">
        <el-input v-model="form.order_num" class="custom-input2" placeholder="请输入排序" />
      </el-form-item>
      <el-form-item label="状态:" label-width="200px" prop="visible">
        <el-select
          v-model="form.visible"
          placeholder="请选择"
          class="custom-select"
          size="large"
          popper-class="custom-select-popper"
          :teleported="false"
          clearable
        >
          <el-option v-for="item in show_status" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </Dialog>
</template>

<script lang="ts" setup name="EditClassDialog">
import { createClassification, getClassificationInfo, updateClassificationInfo } from '@/api/globalMap/onlinePlotting';
import { FormInstance } from 'element-plus';
import { deepClone } from '@/utils';
import { toRefs } from 'vue';
import { showSuccessMsg } from '@/utils/notification';

const props = defineProps({
  modelValue: Boolean,
  id: String,
  templateId: String
});
const emits = defineEmits(['update:modelValue', 'updateData']);
const proxy = getCurrentInstance()?.proxy;
const { show_status } = toRefs<any>(proxy?.useDict('show_status'));
let classFormRef = ref();
const form = ref<ClassParams>({
  name: '',
  value: '',
  image: '',
  icon: '',
  order_num: '',
  visible: '1',
  fileList: [],
  size: []
});
const rules = ref({
  name: [{ required: true, message: '分类名称不能为空', trigger: 'blur' }],
  value: [{ required: true, message: '分类值不能为空', trigger: 'blur' }],
  image: [{ required: true, message: '图标不能为空', trigger: 'blur' }]
});

// 取消
const handleCancel = () => {
  emits('update:modelValue');
};
//提交
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid) => {
    if (valid) {
      const data = deepClone(form.value);
      data.image = data.fileList[0].url;
      data.icon = data.fileList[0].name;
      data.template_id = props.templateId;
      delete data.fileList;
      if (!data.order_num) {
        delete data.order_num;
      }
      if (!data.visible) {
        delete data.visible;
      }
      if (!!props.id) {
        updateClassificationInfo(props.id, data).then(() => {
          showSuccessMsg('修改成功');
          emits('updateData');
          emits('update:modelValue');
        });
      } else {
        createClassification(data).then(() => {
          showSuccessMsg('新增成功');
          emits('updateData');
          emits('update:modelValue');
        });
      }
    }
  });
};
onMounted(() => {
  if (props.id) {
    getClassificationInfo(props.id).then((res) => {
      res.data.fileList = [
        {
          name: res.data.icon,
          url: res.data.image
        }
      ];
      form.value = res.data;
    });
  }
});
</script>

<style lang="scss" scoped></style>