调整FYForm表单逻辑

riku

2023-12-22 e5875000e60d4976f159f287ae3773f1d11960b3

调整FYForm表单逻辑

 src/api/index.js

@@ -1,7 +1,7 @@
import axios from 'axios';
import { ElMessage } from 'element-plus';

const debug = false;
const debug = true;

let ip1 = 'http://47.100.191.150:9005/';
let ip1_file = 'http://47.100.191.150:9005/';

 src/components.d.ts

@@ -61,7 +61,6 @@
    ElTag: typeof import('element-plus/es')['ElTag']
    ElText: typeof import('element-plus/es')['ElText']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
    ElTransfer: typeof import('element-plus/es')['ElTransfer']
    ElTree: typeof import('element-plus/es')['ElTree']
    Footer: typeof import('./components/core/Footer.vue')['default']
    FormCol: typeof import('./components/layout/FormCol.vue')['default']

 src/components/form/FYForm.vue

@@ -62,15 +62,15 @@
  _locations: [
    {
      required: true,
      // message: '行政区划不能为空',
      message: '行政区划不能为空',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('Please input the age'));
        } else {
          callback()
        }
      }
      // validator: (rule, value, callback) => {
      //   if (!value) {
      //     callback(new Error('Please input the age'));
      //   } else {
      //     callback()
      //   }
      // }
    }
  ],
  _scenetype: [
@@ -78,13 +78,13 @@
      required: true,
      message: '场景类型不能为空',
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('Please input the age'));
        } else {
          callback()
        }
      }
      // validator: (rule, value, callback) => {
      //   if (!value) {
      //     callback(new Error('Please input the age'));
      //   } else {
      //     callback()
      //   }
      // }
    }
  ]
});
@@ -154,7 +154,7 @@
  emit('update:isEdit', nValue);
});

defineExpose({ onSubmit, onCancel, onReset });
defineExpose({ formObj, onSubmit, onCancel, onReset });
</script>

<style scoped></style>

 src/composables/formConfirm.js

@@ -1,4 +1,4 @@
import { defineProps, onActivated, onDeactivated, ref, watch } from 'vue';
import { defineProps, onActivated, onDeactivated, reactive, ref, watch } from 'vue';
import { useCloned } from '@vueuse/core';
import { useMessageBoxTip, useMessageBox } from './messageBox';

@@ -26,7 +26,8 @@
  // });

  //表单内容
  const formObj = ref(defaultForm ? defaultForm : {});
  const formObj = reactive(defaultForm ? defaultForm : {});
  // const formObj = reactive({});
  let formObjClone = useCloned(formObj, { manual: true });
  //表单组件引用
  const formRef = ref(null);

 src/enum/scene.js

@@ -66,6 +66,14 @@
      label: '汽修',
      value: '7',
    },
    {
      label: '实验室',
      value: '8',
    },
    {
      label: '医疗机构',
      value: '9',
    },
  ];
}


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

@@ -1,29 +1,13 @@
<!-- 场景基本信息编辑 -->
<template>
  <FYForm
    :form-info="_formInfo"
    :rules="rules"
    :useReset="true"
    @submit="submit"
    @cancel="cancel"
  >
  <FYForm :form-info="formInfo" :rules="rules" :useReset="true" @submit="submit" @cancel="cancel">
    <template #form-item="{ formObj }">
      <el-form-item label="场景名称" prop="name">
        <el-input
          clearable
          show-word-limit
          v-model="formObj.name"
          placeholder="场景名称"
        />
        <el-input clearable show-word-limit v-model="formObj.name" placeholder="场景名称" />
      </el-form-item>
      <el-form-item label="场景类型" prop="_typeObj">
        <el-select v-model="formObj._typeObj" placeholder="场景类型">
          <el-option
            v-for="s in sceneTypes"
            :key="s.value"
            :label="s.label"
            :value="s"
          />
          <el-option v-for="s in sceneTypes" :key="s.value" :label="s.label" :value="s" />
        </el-select>
      </el-form-item>
      <el-form-item label="省/市/区/镇" prop="_locations">
@@ -36,12 +20,7 @@
        />
      </el-form-item>
      <el-form-item label="地址" prop="location">
        <el-input
          show-word-limit
          clearable
          v-model="formObj.location"
          placeholder="地址"
        />
        <el-input show-word-limit clearable v-model="formObj.location" placeholder="地址" />
      </el-form-item>
      <el-form-item label="经度" prop="longitude">
        <!-- <el-input type="number" v-model="formObj.longitude" placeholder="经度" /> -->
@@ -62,12 +41,7 @@
        />
      </el-form-item>
      <el-form-item label="联系人" prop="contacts">
        <el-input
          show-word-limit
          clearable
          v-model="formObj.contacts"
          placeholder="联系人"
        />
        <el-input show-word-limit clearable v-model="formObj.contacts" placeholder="联系人" />
      </el-form-item>
      <el-form-item label="联系电话" prop="contactst">
        <el-input type="tel" v-model="formObj.contactst" placeholder="联系电话">
@@ -80,9 +54,7 @@
      </el-form-item>
      <el-form-item label="状态" prop="online">
        <el-switch v-model="formObj.online" />
        <span style="margin-left: 16px">{{
          formObj.online ? '在线' : '下线'
        }}</span>
        <span style="margin-left: 16px">{{ formObj.online ? '在线' : '下线' }}</span>
      </el-form-item>
      <el-form-item label="编号" prop="index">
        <el-input-number readonly v-model="formObj.index" :step="1" :min="0" />
@@ -92,62 +64,71 @@
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { defineProps, defineEmits, reactive, ref, watch, computed } from 'vue';
import { enumScene } from '@/enum/scene';
import { enumLocation } from '@/enum/location';
import sceneApi from '@/api/fysp/sceneApi';

const props = defineProps({
  //场景基本信息
  formInfo: Object,
  model: {
    type: Object,
    default: () => {
      return {};
    }
  },
  //是创建或者更新场景
  create: Boolean,
  create: Boolean
});

// 场景基本信息，做相应的数据格式化
const formInfo = computed(() => {
  return parseSceneBaseInfo(props.model);
});

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

const _formInfo = ref({});
const sceneTypes = reactive(enumScene(2, false));
const locations = reactive(enumLocation(false));
const cascaderProps = reactive({
  checkStrictly: true,
  checkStrictly: true
});
const rules = reactive({
  name: [
    {
      required: true,
      message: '场景名称不能为空',
      trigger: 'blur',
    },
      trigger: 'blur'
    }
  ],
  _typeObj: [
    {
      required: true,
      message: '场景类型不能为空',
      trigger: 'change',
    },
      trigger: 'change'
    }
  ],
  _locations: [
    {
      required: true,
      message: '行政区划不能为空',
      trigger: 'change',
    },
      trigger: 'change'
    }
  ],
  longitude: [
    {
      required: true,
      message: '经度不能为空',
      trigger: 'blur',
    },
      trigger: 'blur'
    }
  ],
  latitude: [
    {
      required: true,
      message: '纬度不能为空',
      trigger: 'blur',
    },
  ],
      trigger: 'blur'
    }
  ]
});

/**
@@ -158,92 +139,80 @@
function parseSceneBaseInfo(s) {
  s._typeObj = {
    label: s.type,
    value: s.typeid + '',
    value: s.typeid + ''
  };

  s._locations = [];
  if (s.provincecode && s.provincecode.length > 0)
    s._locations.push([s.provincecode, s.provincename]);
  if (s.citycode && s.citycode.length > 0)
    s._locations.push([s.citycode, s.cityname]);
  if (s.citycode && s.citycode.length > 0) s._locations.push([s.citycode, s.cityname]);
  if (s.districtcode && s.districtcode.length > 0)
    s._locations.push([s.districtcode, s.districtname]);
  if (s.towncode && s.towncode.length > 0)
    s._locations.push([s.towncode, s.townname]);
  if (s.towncode && s.towncode.length > 0) s._locations.push([s.towncode, s.townname]);

  s.online = s.extension1 != '0';

  return s;
}
// 创建新场景
function createScene(formObj, func) {
function createScene(v, success, fail) {
  return sceneApi
    .createScene(formObj.value)
    .createScene(v)
    .then(() => {
      emit('onSubmit', formObj);
      emit('onSubmit', v);
      success();
    })
    .finally(() => {
      func();
    .catch((err) => {
      fail(err);
    });
}
// 更新场景
function updateScene(formObj, func) {
function updateScene(v, success, fail) {
  return sceneApi
    .updateScene(formObj.value)
    .updateScene(v)
    .then(() => {
      emit('onSubmit', formObj);
      emit('onSubmit', v);
      success();
    })
    .finally(() => {
      func();
    .catch((err) => {
      fail(err);
    });
}
function submit(formObj, func) {
function submit(v, success, fail) {
  // 行政区划信息填充
  const a = formObj.value._locations;
  const a = v.value._locations;
  if (a[0]) {
    formObj.value.provincecode = a[0][0];
    formObj.value.provincename = a[0][1];
    v.value.provincecode = a[0][0];
    v.value.provincename = a[0][1];
  }
  if (a[1]) {
    formObj.value.citycode = a[1][0];
    formObj.value.cityname = a[1][1];
    v.value.citycode = a[1][0];
    v.value.cityname = a[1][1];
  }
  if (a[2]) {
    formObj.value.districtcode = a[2][0];
    formObj.value.districtname = a[2][1];
    v.value.districtcode = a[2][0];
    v.value.districtname = a[2][1];
  }
  if (a[3]) {
    formObj.value.towncode = a[3][0];
    formObj.value.townname = a[3][1];
    v.value.towncode = a[3][0];
    v.value.townname = a[3][1];
  }

  // 场景类型信息填充
  const b = formObj.value._typeObj;
  formObj.value.typeid = b.value;
  formObj.value.type = b.label;
  const b = v.value._typeObj;
  v.value.typeid = b.value;
  v.value.type = b.label;

  // 是否在线信息填充
  formObj.value.online
    ? (formObj.value.extension1 = '1')
    : (formObj.value.extension1 = '0');
  v.value.online ? (v.value.extension1 = '1') : (v.value.extension1 = '0');

  formObj.value.updatedate = new Date().toISOString();
  v.value.updatedate = new Date().toISOString();

  emit('onSubmit', formObj);

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

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

<style scoped></style>

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

@@ -15,7 +15,7 @@
  <div class="sub-title">基本信息</div>
  <el-row>
    <FormCol>
      <CompSceneBaseInfo :form-info="formScene" />
      <CompSceneBaseInfo :model="formScene" />
    </FormCol>
  </el-row>
  <template v-if="formScene.typeid == 1">

 src/views/fysp/evaluation/components/precheck/CompCheckArea.vue

@@ -6,7 +6,6 @@
    </template>
    <FYForm
      ref="formRef"
      :form-info="evaConditon"
      :rules="evaConditionRules"
      :showButtons="false"
      @submit="nextStep"
@@ -63,8 +62,6 @@
  data() {
    return {
      loading: false,
      // 评估任务范围
      evaConditon: {},
      evaConditionRules: {
        time: [
          {
@@ -78,8 +75,8 @@
  },
  methods: {
    setOptions(param) {
      this.evaConditon._locations = param.locations;
      this.evaConditon._scenetype = param.scenetype;
      this.$refs.formRef.formObj._locations = param.locations;
      this.$refs.formRef.formObj._scenetype = param.scenetype;
    },
    submit() {
      this.$refs.formRef.onSubmit(false);

 src/views/fytz/user/UserEdit.vue

@@ -9,7 +9,7 @@
    <el-tab-pane label="基本信息" name="first">
      <div class="sub-title">用户信息</div>
      <FormCol>
        <CompUserInfo :form-info="formUser" />
        <CompUserInfo :model="formUser" />
      </FormCol>
      <el-divider />
      <div class="sub-title">用户信息表</div>

 src/views/fytz/user/UserInfo.vue

@@ -108,7 +108,7 @@
      </el-table-column>
    </template>
  </FYTable>
  <CompUserInfoAddDrawer v-model:drawer="drawer"></CompUserInfoAddDrawer>
  <CompUserInfoAddDrawer v-model="drawer"></CompUserInfoAddDrawer>
</template>

<script>

 src/views/fytz/user/components/CompUserInfo.vue

@@ -1,14 +1,13 @@
<template>
  <FYForm
    :form-info="_formInfo"
    :form-info="formInfo"
    :rules="rules"
    :doClear="active"
    :useCancel="create"
    :useReset="!create"
    :clearAftSubmit="create"
    v-model:is-edit="_edit"
    @updateEdit="(v) => $emit('updateEdit', v)"
    @submit="submit"
    @cancel="cancel"
    @cancel="$emit('onCancel')"
  >
    <template #form-item="{ formObj }">
      <!-- <el-form-item label="头像url" prop="HeadIconUrl">
@@ -85,15 +84,19 @@
</template>

<script setup>
import { defineProps, defineEmits, reactive, ref, watch } from 'vue';
import { defineProps, defineEmits, reactive, ref, watch, computed } from 'vue';
import { getSceneName } from '@/enum/scene';
import userApi from '@/api/fytz/userApi';
import { useMessageBoxTip } from '@/composables/messageBox';

const props = defineProps({
  //基本信息
  formInfo: Object,
  isEdit: Boolean,
  model: {
    type: Object,
    default: () => {
      return { isenable: true };
    }
  },
  create: {
    type: Boolean,
    default: false
@@ -104,10 +107,12 @@
  }
});

const emit = defineEmits(['onSubmit', 'onCancel', 'update:isEdit']);
const formInfo = computed(() => {
  return parseUserInfo(props.model);
});

const _formInfo = ref({ isenable: true });
const _edit = ref(false);
const emit = defineEmits(['onSubmit', 'onCancel', 'updateEdit']);

const rules = reactive({
  acountname: [
    {
@@ -122,7 +127,7 @@
      message: '用户昵称不能为空',
      trigger: 'blur'
    }
  ],
  ]
  // password: [
  //   {
  //     required: props.create,
@@ -134,38 +139,42 @@

// 用户基本信息格式化
function parseUserInfo(s) {
  s._usertype = {
    label: s.usertype,
    value: s.usertypeid + ''
  };
  if (s.usertype && s.usertypeid) {
    s._usertype = {
      label: s.usertype,
      value: s.usertypeid + ''
    };
  }

  s._scenetype = getSceneName(s.extension2, 1);
  if (s.extension2) {
    s._scenetype = getSceneName(s.extension2, 1);
  }

  s._locations = {};

  return s;
}

function parseUserInfoReverse(formObj) {
function parseUserInfoReverse(v) {
  // 行政区划信息填充
  const a = formObj.value._locations;
  formObj.value.extension1 = a.dName;
  const a = v._locations;
  v.extension1 = a.dName;
  // 用户类型信息填充
  const b = formObj.value._usertype;
  formObj.value.usertypeid = b.value;
  formObj.value.usertype = b.label;
  const b = v._usertype;
  v.usertypeid = b.value;
  v.usertype = b.label;

  // 场景类型信息填充
  const c = formObj.value._scenetype;
  formObj.value.extension2 = c.value;
  const c = v._scenetype;
  v.extension2 = c.value;

  return formObj;
  return v;
}

function createUser(formObj, success, fail) {
  const l = formObj.value._locations;
function createUser(v, success, fail) {
  const l = v._locations;
  const params = {
    userInfo: formObj.value,
    userInfo: v,
    baseInfo: {
      biProvinceCode: l.pCode,
      biProvinceName: l.pName,
@@ -176,7 +185,7 @@
      biTownCode: l.tCode,
      biTownName: l.tName,
      biAreaCode: l.aCode,
      biArea: l.aName,
      biArea: l.aName
      // biManagementCompanyId:
      // biManagementCompany:
      // biContact
@@ -195,11 +204,11 @@
    });
}

function updateUser(formObj, success, fail) {
function updateUser(v, success, fail) {
  return userApi
    .updateUserInfo(formObj.value)
    .updateUserInfo(v)
    .then(() => {
      emit('onSubmit', formObj);
      emit('onSubmit', v);
      if (success) success();
    })
    .catch((err) => {
@@ -207,39 +216,18 @@
    });
}

function submit(formObj, success, fail) {
  parseUserInfoReverse(formObj);
function submit(v, success, fail) {
  parseUserInfoReverse(v.value);

  return props.create ? createUser(formObj, success, fail) : updateUser(formObj, success, fail);
  return props.create ? createUser(v.value, success, fail) : updateUser(v.value, success, fail);
  // parseUserInfoReverse(props.formInfo);

  // return props.create
  //   ? createUser(props.formInfo, success, fail)
  //   : updateUser(props.formInfo, success, fail);
}

function cancel() {
  emit('onCancel');
}

watch(
  () => props.formInfo,
  (nValue) => {
    _formInfo.value = parseUserInfo(nValue);
  }
);

// watch(
//   () => props.create,
//   (nValue) => {
//     if (nValue) {

//     }
//   },
//   {immediate:true}
// );

watch(_edit, (nValue) => {
  emit('update:isEdit', nValue);
});

// 重置密码

const pwLoading = ref(false);

function onResetPw() {
@@ -248,7 +236,7 @@
    confirmTitle: '重置密码',
    onConfirm: async () => {
      pwLoading.value = true;
      return userApi.resetPassword(props.formInfo.guid).finally(() => {
      return userApi.resetPassword(formInfo.value.guid).finally(() => {
        pwLoading.value = false;
      });
    }

 src/views/fytz/user/components/CompUserInfoAddDrawer.vue

@@ -1,16 +1,18 @@
<template>
  <el-drawer
    v-model="drawer_"
    title="新增用户"
    direction="rtl"
    :model-value="modelValue"
    @open="updateDrawer(true)"
    @close="updateDrawer(false)"
    :before-close="onDrawerClose"
  >
    <CompUserInfo
      :create="true"
      :active="drawer"
      v-model:is-edit="drawerEdit"
      @on-submit="onDrawerSubmit"
      @on-cancel="onDrawerCancel"
      :active="modelValue"
      @updateEdit="(v) => (drawerEdit = v)"
      @on-submit="updateDrawer(false)"
      @on-cancel="updateDrawer(false)"
    ></CompUserInfo>
  </el-drawer>
</template>
@@ -21,26 +23,16 @@

export default {
  components: { CompUserInfo },
  props: ['drawer'],
  emits: ['update:drawer'],
  props: ['modelValue'],
  emits: ['update:modelValue'],
  data() {
    return {
      drawer_: this.drawer,
      drawerEdit: false,
      drawerEdit: false
    };
  },
  watch: {
    drawer(nValue) {
      this.drawer_ = nValue;
    },
    drawer_(nValue) {
      this.$emit('update:drawer', nValue);
    },
  },
  methods: {
    onDrawerSubmit() {
      // 关闭弹出框
      this.drawer_ = false;
    updateDrawer(status) {
      this.$emit('update:modelValue', status);
    },
    onDrawerClose(done) {
      if (this.drawerEdit) {
@@ -50,19 +42,13 @@
          confirmTitle: '取消',
          onConfirm: () => {
            done();
          },
          }
        });
      } else {
        // 直接关闭
        done();
      }
    },
    onDrawerCancel() {
      // this.onDrawerClose(() => {
      //   this.drawer_ = false;
      // });
      this.drawer_ = false;
    },
  },
  }
};
</script>