新增添加用户,优化用户详情页

src/api/consumer.ts

@@ -38,3 +38,18 @@ export function creatContact(params: any) {
 export function sendMsgApi(params: any) {
   return request.get({ url: "/contract.contract/postsms", params });
 }
+
+//公司下拉列表
+export function getCompanyList(params: any) {
+  return request.get({ url: "/user.user/getCompanyList", params });
+}
+
+//角色下拉列表
+export function getRolelist(params: any) {
+  return request.get({ url: "/user.userRole/getlist", params });
+}
+
+//创建用户
+export function userAdd(params: any) {
+  return request.post({ url: "/user.user/add", params });
+}

src/views/consumer/lists/detail.vue

@@ -217,50 +217,7 @@
             </el-form-item>
           </div>
           <div>
-            <el-form-item label="行驶证" prop="car_card">
+            <el-form-item label="银行卡" prop="bank_account">
-              <el-upload
-                v-model="formData.qualification.car_card"
-                :disabled="flag"
-                class="avatar-uploader pl-3"
-                :data="{ cid: 1 }"
-                :headers="{ Token: userStore.token }"
-                :action="base_url + '/upload/image'"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccessCarA"
-              >
-                <img
-                  v-if="formData.qualification.car_card"
-                  :src="formData.qualification.car_card"
-                  class="avatar"
-                />
-                <el-icon v-else class="avatar-uploader-icon">
-                  <Plus />
-                </el-icon>
-              </el-upload>
-              <el-upload
-                v-model="formData.qualification.car_card_b"
-                :disabled="flag"
-                class="avatar-uploader pl-3"
-                :data="{ cid: 1 }"
-                :headers="{ Token: userStore.token }"
-                :action="base_url + '/upload/image'"
-                :show-file-list="false"
-                :on-success="handleAvatarSuccessCarB"
-                :before-upload="beforeAvatarUpload_two"
-              >
-                <img
-                  v-if="formData.qualification.car_card_b"
-                  :src="formData.qualification.car_card_b"
-                  class="avatar"
-                />
-                <el-icon v-else class="avatar-uploader-icon">
-                  <Plus />
-                </el-icon>
-              </el-upload>
-            </el-form-item>
-          </div>
-          <div>
-            <el-form-item label="银行卡号" prop="bank_account">
               <el-upload
                 v-model="formData.qualification.bank_account"
                 :disabled="flag"
@@ -303,6 +260,50 @@
               </el-upload>
             </el-form-item>
           </div>
+
+          <div>
+            <el-form-item label="行驶证" prop="car_card">
+              <el-upload
+                v-model="formData.qualification.car_card"
+                :disabled="flag"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessCarA"
+              >
+                <img
+                  v-if="formData.qualification.car_card"
+                  :src="formData.qualification.car_card"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+              <el-upload
+                v-model="formData.qualification.car_card_b"
+                :disabled="flag"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessCarB"
+                :before-upload="beforeAvatarUpload_two"
+              >
+                <img
+                  v-if="formData.qualification.car_card_b"
+                  :src="formData.qualification.car_card_b"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
         </div>
         <template v-if="disabledPartyA">
           <el-col :span="24">

src/views/consumer/lists/dialog_index.vue

@@ -0,0 +1,146 @@
+<template>
+  <div>
+    <el-card class="!border-none" shadow="never">
+      <el-form class="mb-[-16px]" :model="queryParams" inline>
+        <el-form-item label="公司名称" prop="company_name">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.company_name"
+            clearable
+            placeholder="请输入公司名称"
+          />
+        </el-form-item>
+        <el-form-item label="公司类型" prop="company_type">
+          <el-select
+            v-model="queryParams.company_type"
+            placeholder="公司类型"
+            clearable
+            @change="changeType"
+            :style="{ width: '100%' }"
+          >
+            <el-option
+              v-for="(item, index) in typeList"
+              :key="index"
+              :label="item.name"
+              :value="item.id"
+            ></el-option>
+          </el-select>
+          <!-- <el-input
+            class="w-[280px]"
+            v-model="queryParams.company_type"
+            clearable
+            placeholder="请输入公司类型"
+          /> -->
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="resetPage">查询</el-button>
+          <el-button @click="resetParams">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+      <div class="mt-4">
+        <el-table :data="pager.lists" @cell-click="handleCurrentChange">
+          <el-table-column label="公司名称" property="company_name" />
+          <el-table-column label="公司类型" property="company_type">
+            <template #default="{ row }">
+              <span
+                >{{typeList.find((item: any)=>item.id==row.company_type).name}}</span
+              >
+            </template>
+          </el-table-column>
+          <el-table-column label="区县" property="area_name" />
+          <el-table-column label="乡镇" property="street_name" />
+          <el-table-column label="主联系人" property="master_name" />
+          <el-table-column label="联系方式" property="master_phone" />
+        </el-table>
+      </div>
+      <div class="flex mt-4 justify-end">
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script lang="ts" setup name="companyLists">
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+import {
+  apiCompanyLists,
+  companyListTwo,
+  apiCompanyDelete,
+  getContractPartyACompanyTypeList,
+} from "@/api/company";
+import { dictDataLists } from "@/api/setting/dict";
+import { defineEmits } from "vue";
+
+// 当前类型
+const props = defineProps({
+  type: {
+    type: Number,
+    default: 0,
+  },
+  companyTypeList: {
+    type: Array,
+    default: () => {
+      return [];
+    },
+  },
+});
+
+// 可选公司类型
+const typeList = ref([]);
+dictDataLists({
+  type_id: 6,
+}).then((res) => {
+  typeList.value = res.lists;
+});
+
+// 查询条件
+const queryParams = reactive({
+  level_two: "",
+  level_one: "",
+  company_name: "",
+  organization_code: "",
+  city: "",
+  area: "",
+  street: "",
+  company_type: "",
+  master_name: "",
+  master_position: "",
+  master_phone: "",
+  master_email: "",
+  other_contacts: "",
+  area_manager: "",
+  is_contract: "",
+  account: "",
+  password: "",
+  deposit: "",
+  deposit_time: "",
+  qualification: "",
+  status: "",
+});
+
+if (props.type) queryParams.company_type = props.type;
+
+// 选中数据
+const emits = defineEmits(["customEvent"]);
+
+// 选中数据子父传递
+const handleCurrentChange = (value: any) => {
+  emits("customEvent", value);
+};
+
+// 选择公司类型
+const changeType = (e: any) => {
+  getLists();
+};
+
+// 分页相关
+const { pager, getLists, resetParams, resetPage } = usePaging({
+  fetchFun: companyListTwo,
+  params: queryParams,
+});
+
+getLists();
+</script>

src/views/consumer/lists/edit.vue

@@ -0,0 +1,665 @@
+<template>
+  <div>
+    <el-card class="!border-none" shadow="never">
+      <el-page-header content="新增用户" @back="$router.back()" />
+    </el-card>
+    <el-card class="mt-4 !border-none" shadow="never">
+      <el-form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        label-width="84px"
+      >
+        <div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>
+        <div class="headimg">
+          <el-upload
+            v-model="formData.avatar"
+            class="avatar-uploader-head"
+            :data="{ cid: 1 }"
+            :headers="{ Token: userStore.token }"
+            :action="base_url + '/upload/image'"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccessAvatar"
+          >
+            <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
+            <el-icon v-else class="avatar-uploader-icon">
+              <Plus />
+            </el-icon>
+          </el-upload>
+        </div>
+        <el-col class="pt-6 !border-none">
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="公司" prop="company_name">
+                <el-input
+                  v-model="formData.company_name"
+                  placeholder="请选择公司"
+                  readonly
+                  clearable
+                  :style="{ width: '100%' }"
+                  @click="showCompany = true"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="13">
+              <el-form-item label="角色" prop="group_id">
+                <el-select
+                  v-model="formData.group_id"
+                  placeholder="请选择角色"
+                  readonly
+                  :style="{ width: '100%' }"
+                  @change="formRef?.clearValidate(['group_id'])"
+                >
+                  <el-option
+                    v-for="(item, index) in roleList"
+                    :label="item.name"
+                    :value="item.id"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="姓名" prop="nickname">
+                <el-input
+                  v-model="formData.nickname"
+                  placeholder="请输入姓名"
+                  clearable
+                  :style="{ width: '100%' }"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="13">
+              <el-form-item label="性别" prop="sex">
+                <el-select
+                  v-model="formData.sex"
+                  placeholder="请选择性别"
+                  :style="{ width: '100%' }"
+                  @change="formRef?.clearValidate(['sex'])"
+                >
+                  <el-option label="男" :value="1" />
+                  <el-option label="女" :value="2" />
+                </el-select>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="11">
+              <el-form-item label="身份证号" prop="id_card">
+                <el-input
+                  v-model="formData.id_card"
+                  placeholder="请输入身份证号"
+                  clearable
+                  :style="{ width: '100%' }"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="13">
+              <el-form-item label="联系电话" prop="account">
+                <el-input
+                  v-model="formData.account"
+                  placeholder="请输入联系电话"
+                  clearable
+                  :style="{ width: '100%' }"
+                ></el-input>
+              </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item label="省" prop="province">
+              <el-select
+                v-model="formData.province_name"
+                placeholder="请选择省"
+                :disabled="flag"
+                clearable
+                @change="province_change"
+                :style="{ width: '100%' }"
+              >
+                <el-option
+                  v-for="(item, index) in datas.provinceOptions"
+                  :key="index"
+                  :label="item.province_name"
+                  :value="item.province_code"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="市" prop="city">
+              <el-select
+                v-model="formData.city_name"
+                placeholder="请选择市"
+                clearable
+                :disabled="flag"
+                @change="city_change"
+                :style="{ width: '100%' }"
+              >
+                <el-option
+                  v-for="(item, index) in datas.cityOptions"
+                  :key="index"
+                  :label="item.city_name"
+                  :value="item.city_code"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="区县" prop="area">
+              <el-select
+                v-model="formData.area_name"
+                placeholder="请选择区县"
+                :disabled="flag"
+                clearable
+                @change="area_change"
+                :style="{ width: '100%' }"
+              >
+                <el-option
+                  v-for="(item, index) in datas.areaOptions"
+                  :key="index"
+                  :label="item.area_name"
+                  :value="item.area_code"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item
+              v-if="formData.street_name"
+              label="乡镇"
+              prop="street"
+            >
+              <el-select
+                v-model="formData.street_name"
+                placeholder="请选择乡镇"
+                :disabled="flag"
+                clearable
+                @change="street_change"
+                :style="{ width: '100%' }"
+              >
+                <el-option
+                  v-for="(item, index) in datas.streetOptions"
+                  :key="index"
+                  :label="item.street_name"
+                  :value="item.street_code"
+                ></el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item
+              v-if="formData.village_name"
+              label="村社"
+              prop="village"
+            >
+              <el-input
+                v-model="formData.village_name"
+                :disabled="flag"
+                placeholder="请输入村社"
+                clearable
+                :style="{ width: '100%' }"
+              ></el-input>
+            </el-form-item>
+            <el-form-item
+              v-if="formData.brigade_name"
+              label="小队"
+              prop="brigade"
+            >
+              <el-input
+                v-model="formData.brigade_name"
+                :disabled="flag"
+                placeholder="请输入小队"
+                clearable
+                :style="{ width: '100%' }"
+              ></el-input>
+            </el-form-item>
+          </el-row>
+        </el-col>
+
+        <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div>
+        <div style="display: flex; justify-content: space-between">
+          <div>
+            <el-form-item label="身份证" prop="qualification.id_card">
+              <el-upload
+                v-model="formData.qualification.id_card"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessIdA"
+              >
+                <img
+                  v-if="formData.qualification.id_card"
+                  :src="formData.qualification.id_card"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+              <el-upload
+                v-model="formData.qualification.id_card_b"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessIdB"
+              >
+                <img
+                  v-if="formData.qualification.id_card_b"
+                  :src="formData.qualification.id_card_b"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+          <div>
+            <el-form-item label="银行卡" prop="qualification.bank_account">
+              <el-upload
+                v-model="formData.qualification.bank_account"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessBankA"
+                :before-upload="beforeAvatarUpload_three"
+              >
+                <img
+                  v-if="formData.qualification.bank_account"
+                  :src="formData.qualification.bank_account"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+              <el-upload
+                v-model="formData.qualification.bank_account_b"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessBankB"
+                :before-upload="beforeAvatarUpload_three"
+              >
+                <img
+                  v-if="formData.qualification.bank_account_b"
+                  :src="formData.qualification.bank_account_b"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+
+          <div>
+            <el-form-item label="行驶证" prop="car_card">
+              <el-upload
+                v-model="formData.qualification.car_card"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessCarA"
+              >
+                <img
+                  v-if="formData.qualification.car_card"
+                  :src="formData.qualification.car_card"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+              <el-upload
+                v-model="formData.qualification.car_card_b"
+                class="avatar-uploader pl-3"
+                :data="{ cid: 1 }"
+                :headers="{ Token: userStore.token }"
+                :action="base_url + '/upload/image'"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccessCarB"
+                :before-upload="beforeAvatarUpload_two"
+              >
+                <img
+                  v-if="formData.qualification.car_card_b"
+                  :src="formData.qualification.car_card_b"
+                  class="avatar"
+                />
+                <el-icon v-else class="avatar-uploader-icon">
+                  <Plus />
+                </el-icon>
+              </el-upload>
+            </el-form-item>
+          </div>
+        </div>
+        <el-button type="primary" @click="submit">创建</el-button>
+      </el-form>
+    </el-card>
+    <el-dialog v-model="showCompany">
+      <DialogIndex
+        :companyTypeList="datas.dictTypeLists"
+        :type="41"
+        @customEvent="customEvent"
+      ></DialogIndex>
+    </el-dialog>
+  </div>
+</template>
+  
+  <script lang="ts" setup name="consumerDetail">
+import {
+  type FormInstance,
+  type UploadProps,
+  ElMessage,
+  type UploadUserFile,
+} from "element-plus";
+import {
+  upContact,
+  userAdd,
+  getRolelist,
+  getCompanyList,
+} from "@/api/consumer";
+import {
+  apiCityList,
+  apiAreaList,
+  apiStreetList,
+  apiProvinceList,
+} from "@/api/common";
+import { dictDataLists } from "@/api/setting/dict";
+import { isEmpty } from "@/utils/util";
+import AccountAdjust from "../components/account-adjust.vue";
+import useMultipleTabs from "@/hooks/useMultipleTabs";
+import useUserStore from "@/stores/modules/user";
+import feedback from "@/utils/feedback";
+import DialogIndex from "./dialog_index.vue";
+import { inject } from "vue";
+const base_url: any = inject("base_url");
+const { removeTab } = useMultipleTabs();
+const router = useRouter();
+const route = useRoute();
+const flag = ref(true);
+const formData = reactive({
+  id: "",
+  sex: "",
+  id_card: "",
+  nickname: "",
+  group_id: "",
+  company_id: "",
+  company_name: "",
+  province: "",
+  city: "",
+  area: "",
+  street: "",
+  village: "",
+  brigade: "",
+  province_name: "",
+  city_name: "",
+  area_name: "",
+  street_name: "",
+  village_name: "",
+  brigade_name: "",
+  address: "",
+  account: "",
+  qualification: {
+    id_card: "",
+    id_card_b: "",
+    car_card: "",
+    car_card_b: "",
+    bank_account: "",
+    bank_account_b: "",
+  },
+  avatar: "",
+  multipoint_login: 1,
+});
+
+const rules = ref({
+  company_name: [{ required: true, message: "请选择公司", trigger: "blur" }],
+  group_id: [{ required: true, message: "请选择角色", trigger: "blur" }],
+  nickname: [{ required: true, message: "请输入姓名", trigger: "blur" }],
+  sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
+  id_card: [{ required: true, message: "请输入身份证号", trigger: "blur" }],
+  account: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
+  "qualification.bank_account": [
+    { required: true, message: "请上传银行卡", trigger: "blur" },
+  ],
+  "qualification.id_card": [
+    { required: true, message: "请上传身份证", trigger: "blur" },
+  ],
+});
+
+// 字典信息
+const datas: any = reactive({
+  provinceOptions: [],
+  cityOptions: [],
+  areaOptions: [],
+  streetOptions: [],
+  dictTypeLists: [],
+  contract_type: [],
+  contract: [],
+});
+
+const showCompany = ref(false);
+const customEvent = (e: any) => {
+  formData.company_id = e.id;
+  formData.company_name = e.company_name;
+  formData.province = e.province;
+  formData.city = e.city;
+  formData.area = e.area;
+  formData.street = e.street;
+  formData.village = e.village;
+  formData.brigade = e.brigade;
+  formData.province_name = e.province_name;
+  formData.city_name = e.city_name;
+  formData.area_name = e.area_name;
+  formData.street_name = e.street_name;
+  formData.village_name = e.village_name;
+  formData.brigade_name = e.brigade_name;
+  formRef.value?.clearValidate(["company_name"]);
+  showCompany.value = false;
+};
+
+// 角色列表
+const roleList = ref([]);
+getRolelist({}).then((res: any) => {
+  roleList.value = res;
+});
+
+const formRef = shallowRef<FormInstance>();
+const isEdit = ref(false);
+
+const userStore = useUserStore();
+
+const fileList = ref<UploadUserFile[]>([]);
+// 图片上传成功返回的url
+const handleAvatarSuccessIdA: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.qualification.id_card = response.data.uri;
+};
+const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.avatar = response.data.uri;
+};
+const handleAvatarSuccessIdB: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.qualification.id_card_b = response.data.uri;
+};
+const handleAvatarSuccessCarA: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.qualification.car_card = response.data.uri;
+};
+const handleAvatarSuccessCarB: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.qualification.car_card_b = response.data.uri;
+};
+const beforeAvatarUpload_two: UploadProps["beforeUpload"] = (rawFile) => {
+  return true;
+};
+const handleAvatarSuccessBankA: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.qualification.bank_account = response.data.uri;
+};
+const handleAvatarSuccessBankB: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.qualification.bank_account_b = response.data.uri;
+};
+const handleAvatarSuccess_four: UploadProps["onSuccess"] = (
+  response,
+  uploadFile
+) => {
+  if (response.code == 0) {
+    ElMessage.error(response.msg);
+    return;
+  }
+  formData.file = response.data.uri;
+  upContact({ file: formData.file, id: route.query.mdoeid }).then((res) => [
+    (mode.value = false),
+  ]);
+};
+const beforeAvatarUpload_three: UploadProps["beforeUpload"] = (rawFile) => {
+  return true;
+};
+
+//获取省份
+function province_change(value: string) {
+  getCityList();
+}
+function city_change(value: string) {
+  getAreaList();
+}
+function area_change(value: string) {
+  getStreetList();
+}
+function street_change(value: string) {
+  formData.street = value;
+}
+const getProvinceList = async () => {
+  const data = await apiProvinceList({});
+  datas["provinceOptions"] = data;
+};
+const getCityList = async () => {
+  const data = await apiCityList({ city: formData.province });
+  datas["cityOptions"] = data;
+};
+const getAreaList = async () => {
+  const data = await apiAreaList({ area: formData.city });
+  datas["areaOptions"] = data;
+};
+const getStreetList = async () => {
+  const data = await apiStreetList({ street: formData.area });
+  datas["streetOptions"] = data;
+};
+
+getProvinceList();
+
+// 创建用户
+const submit = () => {
+  if (!formData.avatar) return ElMessage.error("请上传头像");
+  formRef.value?.validate((e) => {
+    if (e) {
+      if (!formData.qualification.id_card || !formData.qualification.id_card_b)
+        return ElMessage.error("请上传身份证信息");
+      if (
+        !formData.qualification.bank_account ||
+        !formData.qualification.bank_account_b
+      )
+        return ElMessage.error("请上传银行卡信息");
+      userAdd(formData).then(() => {
+        ElMessage.success("添加成功");
+        router.back();
+      });
+    }
+  });
+};
+</script>
+  
+  <style lang="scss">
+.headimg {
+  margin-top: 24px;
+  width: 115px;
+  height: 138px;
+  float: left;
+  overflow: hidden;
+}
+
+.avatar-uploader-head .el-upload {
+  width: 115px;
+  height: 138px;
+  background-color: #fff;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload {
+  width: 9.9vw;
+  height: 6.3vw;
+  background-color: #fff;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  text-align: center;
+}
+</style>
+  

src/views/consumer/lists/index.vue

@@ -25,6 +25,19 @@
             :params="queryParams"
             :page-size="pager.size"
           />
+          <el-button
+            v-perms="['user.user/edit']"
+            class="ml-2.5"
+            type="primary"
+          >
+            <router-link
+              :to="{
+                path: getRoutePath('user.user/edit'),
+              }"
+            >
+              创建
+            </router-link>
+          </el-button>
         </el-form-item>
       </el-form>
     </el-card>