zkzx_admin/src/views/admin/admins/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main">
        <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="formFields" :form="form" :rules="rules" @save="onSubmit">
            <template #pid>
              <el-option v-for="(i, index) in pidList" :key="index" :label="i.name" :value="i.id"></el-option>
            </template>
            <template #type>
              <el-option v-for="(i, index) in typeList" :key="index" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #code>
              <el-option v-for="(i, index) in codeList" :key="index" :label="i.label" :value="i.value"></el-option>
            </template>
            <template #password>
              <el-input v-model="form.password" placeholder="请输入密码" :disabled="form._id ? true : false" show-password></el-input>
            </template>
            <template #role>
              <el-select v-model="form.role" multiple placeholder="请选择角色" style="width: 100%">
                <el-option v-for="i in roleList" :key="i._id" :label="i.name" :value="i._id"> </el-option>
              </el-select>
            </template>
          </cForm>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import type { FormRules } from 'element-plus';
import type { Ref } from 'vue';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { DictDataStore } from '@common/src/stores/system/dictData'; // 字典表
import { RoleStore } from '@common/src/stores/system/role'; // 角色
import { AdminStore } from '@common/src/stores/admins/admin'; // 角色
import type { IQueryResult } from '@/util/types.util';
const admin = AdminStore();
const dictData = DictDataStore();
const role = RoleStore();
const route = useRoute();
let form: Ref<any> = ref({});
let roleList: Ref<any> = ref([]);
let pidList: Ref<any> = ref([]);
let codeList: Ref<any> = ref([]);
let typeList: Ref<any> = ref([
  { label: '超级管理员', value: '0' },
  { label: '管理员', value: '1' },
  { label: '机构用户', value: '2' },
  { label: '业务用户', value: '3' }
]);

// 表单
let formFields: Ref<any[]> = ref([
  { label: '所属上级', model: 'pid', type: 'select' },
  { label: '用户类型', model: 'type', type: 'select', options: { disabled: true } },
  { label: '邀请码', model: 'code', type: 'select' },
  { label: '账号', model: 'account' },
  { label: '密码', model: 'password', custom: true },
  { label: '名称', model: 'name' },
  { label: '手机号', model: 'phone' },
  { label: '机构名称', model: 'dept_name' },
  { label: '角色', model: 'role', custom: true }
]);
const rules = reactive<FormRules>({
  name: [{ required: true, message: '名称', trigger: 'blur' }],
  account: [{ required: true, message: '账号', trigger: 'blur' }],
  type: [{ required: true, message: '用户类型', trigger: 'blur' }]
});
onMounted(async () => {
  await searchOther();
  await search();
});
const search = async () => {
  if (route.query.id) {
    let res: IQueryResult = await admin.fetch(route.query.id);
    if (res.errcode == 0) {
      form.value = res.data as {};
    }
  } else form.value.type = '1';
};
// 提交
const onSubmit = async (data) => {
  let res: IQueryResult;
  if (data._id) res = await admin.update(data);
  else res = await admin.create(data);
  if (res.errcode == 0) {
    ElMessage({ type: `success`, message: `维护信息成功` });
    toBack();
  }
};
// 返回上一页
const toBack = () => {
  window.history.go(-1);
};
const searchOther = async () => {
  let res: IQueryResult;
  // 邀请码
  res = await dictData.query({ type: 'account_code' });
  if (res.errcode == 0) codeList.value = res.data;
  // 角色
  res = await role.query();
  if (res.errcode == 0) roleList.value = res.data;
  // 管理员
  res = await admin.query({ role: '0' });
  if (res.errcode == 0) pidList.value = res.data;
};
</script>
<style scoped lang="scss"></style>