初始版本，目前线上可用

frontEnd/src/pages/funeralServices/page/userAddOrEdit.vue

@@ -0,0 +1,143 @@
+<template>
+  <el-form
+    :model="user"
+    label-width="100px"
+    :inline="true"
+    label-suffix="："
+    v-loading="loading"
+    element-loading-text="正在初始化数据...">
+    <el-form-item label="姓名">
+      <el-input :prefix-icon="User" v-model="user.name" placeholder="姓名">
+      </el-input>
+    </el-form-item>
+    <el-form-item label="性别">
+      <el-radio-group v-model="user.sex">
+        <el-radio value="男">男</el-radio>
+        <el-radio value="女">女</el-radio>
+        <el-radio value="保密">保密</el-radio>
+      </el-radio-group>
+    </el-form-item>
+    <el-form-item label="电话">
+      <el-input
+        :prefix-icon="Iphone"
+        v-model="user.phone"
+        placeholder="电话"></el-input>
+    </el-form-item>
+    <el-form-item label="所属角色">
+      <el-select
+        v-model="user.role"
+        clearable
+        filterable
+        placeholder="请选择角色"
+        style="width: 230px">
+        <el-option
+          v-for="item in roleList"
+          :key="item.id"
+          :label="item.name"
+          :value="String(item.id)"></el-option>
+      </el-select>
+    </el-form-item>
+    <el-form-item label="生日">
+      <el-date-picker
+        format="YYYYH-MM-DD"
+        v-model="user.birthday"
+        type="date"
+        placeholder="生日"
+        size="large" />
+    </el-form-item>
+    <el-form-item label="所在区域">
+      <el-cascader
+        :options="pcaTextArrData"
+        v-model="selectedOptions"
+        @change="pcaChange"></el-cascader>
+    </el-form-item>
+    <el-form-item label="详细地址">
+      <el-input
+        :prefix-icon="Location"
+        v-model="user.address"
+        placeholder="请输入详细地址"></el-input>
+    </el-form-item>
+    <el-form-item label="账号状态">
+      <el-switch
+        v-model="user.userState"
+        :active-value="1"
+        :inactive-value="0"
+        active-text="启用"
+        width="65px"
+        inline-prompt
+        inactive-text="禁用"></el-switch>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, watch } from "vue";
+import { userType } from "@/types/user";
+// @ts-ignore
+import { pcaTextArr } from "element-china-area-data";
+import { Avatar, Location, Iphone, User } from "@element-plus/icons-vue";
+import { roleType } from "@/types/role";
+import { roleDataList } from "@/lib/api/publicApiList";
+
+const pcaTextArrData = ref(pcaTextArr);
+const selectedOptions = ref([]);
+const props = defineProps<{
+  data?: userType;
+  executeType?: string;
+}>();
+
+const emit = defineEmits(["updateData"]);
+
+let loading = ref(true);
+let roleList = ref<roleType[]>();
+let user = ref<userType>({
+  createDate: "",
+  name: "",
+  sex: "男",
+  phone: "",
+  userState: 1,
+  role: "",
+  birthday: "",
+  province: "",
+  city: "",
+  area: "",
+  address: "",
+});
+
+onMounted(async () => {
+  roleList.value = await roleDataList();
+
+  watch(
+    () => user,
+    (newVal) => {
+      emit("updateData", newVal);
+    },
+    { deep: true }
+  );
+
+  loading.value = false;
+});
+
+if (props.executeType === "edit") {
+  user.value = { ...props.data };
+  selectedOptions.value = [
+    user.value.province as never,
+    user.value.city as never,
+    user.value.area as never,
+  ];
+}
+
+function pcaChange(data: { [key: string]: any }) {
+  user.value.province = data[0];
+  user.value.city = data[1];
+  user.value.area = data[2];
+}
+</script>
+<style lang="scss" scoped>
+:deep(.el-input) {
+  width: 230px;
+}
+:deep(.el-form-item) {
+  margin-right: 0;
+}
+</style>