2023.12.12

riku

2023-12-12 a35ff1ca423e2fea33dc11f37b54d076acaab3c5

 src/views/baseinfo/fysp/scene/CompSceneBaseInfo.vue

@@ -1,13 +1,12 @@
<!-- 场景基本信息编辑 -->
<template>
  <el-form
    :inline="false"
    :model="formObj"
    ref="formRef"
  <FYForm
    :form-info="_formInfo"
    :rules="rules"
    label-position="right"
    label-width="150px"
    @submit="submit"
    @cancel="cancel"
  >
    <template #form-item="{ formObj }">
    <el-form-item label="场景名称" prop="name">
      <el-input
        clearable
@@ -87,18 +86,8 @@
    <el-form-item label="编号" prop="index">
      <el-input-number readonly v-model="formObj.index" :step="1" :min="0" />
    </el-form-item>

    <el-form-item>
      <el-button
        :disabled="!edit"
        type="primary"
        @click="onSubmit"
        :loading="loading"
        >提交</el-button
      >
      <el-button :disabled="!edit" @click="onReset">重置</el-button>
    </el-form-item>
  </el-form>
    </template>
  </FYForm>
</template>

<script setup>
@@ -106,7 +95,6 @@
import { enumScene } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import sceneApi from '@/api/fysp/sceneApi';
import { useFormConfirm } from '@/composables/formConfirm';

const props = defineProps({
  //场景基本信息
@@ -117,15 +105,7 @@

const emit = defineEmits(['onSubmit', 'onCancel']);

const { formObj, formRef, edit, onSubmit, onReset } = useFormConfirm({
  submit: {
    do: submit,
  },
  cancel: {
    do: cancel,
  },
});
const loading = ref(false);
const _formInfo = ref();
const sceneTypes = reactive(enumScene(2, false));
const locations = reactive(enumLocation(false));
const cascaderProps = reactive({
@@ -169,7 +149,11 @@
  ],
});

// 场景基本信息格式化
/**
 * 场景基本信息格式化
 * 对场景类型、场景行政区划和场景可用状态进行格式化
 * @param {*} s 场景信息
 */
function parseSceneBaseInfo(s) {
  s._typeObj = {
    label: s.type,
@@ -191,30 +175,28 @@
  return s;
}
// 创建新场景
function createScene() {
  loading.value = true;
function createScene(formObj, func) {
  return sceneApi
    .createScene(formObj.value)
    .then((res) => {
      console.log(res);
    .then(() => {
      emit('onSubmit', formObj);
    })
    .finally(() => {
      loading.value = false;
      func();
    });
}
// 更新场景
function updateScene() {
  loading.value = true;
function updateScene(formObj, func) {
  return sceneApi
    .updateScene(formObj.value)
    .then((res) => {
      console.log(res);
    .then(() => {
      emit('onSubmit', formObj);
    })
    .finally(() => {
      loading.value = false;
      func();
    });
}
function submit() {
function submit(formObj, func) {
  // 行政区划信息填充
  const a = formObj.value._locations;
  if (a[0]) {
@@ -248,16 +230,17 @@

  emit('onSubmit', formObj);

  return props.create ? createScene() : updateScene();
  return props.create ? createScene(formObj, func) : updateScene(formObj, func);
}
function cancel() {
  emit('onCancel');
}

// 监听传入的场景基本信息，做相应的数据格式化
watch(
  () => props.formInfo,
  (nValue) => {
    formObj.value = parseSceneBaseInfo(nValue);
    _formInfo.value = parseSceneBaseInfo(nValue);
  }
);
</script>