follow_admin/src/views/user/admin/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
        <el-col :span="24" class="one">
          <cSearch :is_back="true" @toBack="toBack"></cSearch>
        </el-col>
        <el-col :span="24" class="two">
          <cForm :span="24" :fields="fields" :form="form" :rules="rules" @save="toSave" label-width="auto">
            <template #role>
              <el-option v-for="i in roleList" :key="i._id" :label="i.name" :value="i._id"></el-option>
            </template>
            <template #region>
              <el-option v-for="i in regionList" :key="i._id" :label="i.name" :value="i._id"></el-option>
            </template>
          </cForm>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormRules } from 'element-plus';
import { useRoute } from 'vue-router';
// 接口
import { AdminStore } from '@/stores/users/admin';
import { RoleStore } from '@/stores/basic/role'; // 角色
import { RegionStore } from '@/stores/basic/region'; // 区域
import { DictDataStore } from '@/stores/basic/dictData'; // 字典表
import type { IQueryResult } from '@/util/types.util';
const adminAxios = AdminStore();
const dictAxios = DictDataStore();
const roleAxios = RoleStore();
const regionAxios = RegionStore();
// 路由
const route = useRoute();
// 加载中
const loading: Ref<any> = ref(false);
// 表单
let form: Ref<any> = ref({});
let fields: Ref<any[]> = ref([
  { label: '账号', model: 'account', options: { disabled: true } },
  { label: '姓名', model: 'name' },
  { label: '手机号', model: 'phone' },
  { label: '角色', model: 'role', type: 'select' },
  { label: '区域', model: 'region', type: 'select' }
]);
const rules = reactive<FormRules>({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
  role: [{ required: true, message: '请输入角色', trigger: 'blur' }]
});
// 字典表
const roleList: Ref<any> = ref([]);
const regionList: Ref<any> = ref([]);
const statusList: Ref<any> = ref([]);
// 请求
onMounted(async () => {
  loading.value = true;
  await searchOther();
  await search();
  loading.value = false;
});
const search = async () => {
  let id = route.query.id;
  if (id) {
    let res: IQueryResult = await adminAxios.fetch(id);
    if (res.errcode == '0') form.value = res.data as {};
  }
};
// 保存
const toSave = async (data: any) => {
  let res: IQueryResult;
  if (data._id) res = await adminAxios.update(data);
  else res = await adminAxios.create(data);
  if (res.errcode == 0) {
    ElMessage({ type: `success`, message: `维护信息成功` });
    toBack();
  }
};
// 查询其他信息
const searchOther = async () => {
  let res: IQueryResult;
  // 角色
  res = await roleAxios.query({ is_use: '0' });
  if (res.errcode == '0') roleList.value = res.data;
  // 状态
  res = await dictAxios.query({ type: 'exam_status', is_use: '0' });
  if (res.errcode == '0') statusList.value = res.data;
  // 区域
  res = await regionAxios.query({ is_use: '0' });
  if (res.errcode == '0') regionList.value = res.data;
};
// 返回上一页
const toBack = () => {
  window.history.go(-1);
};
</script>
<style scoped lang="scss"></style>