AIManage/src/views/system/role/edit.vue

<!-- 用户管理 -->
<template>
    <div class="app-container model-detail">
      <el-card v-loading="loading">
        <template #header
          ><svg-icon
            icon-class="pause"
            style="width: 20px; height: 20px"
          />角色基本信息</template
        >
        <el-row>
          <el-col :lg="12" :xs="24">
            <el-form
        ref="roleFormRef"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="formData.name" placeholder="请输入角色名称" />
        </el-form-item>

        <el-form-item label="角色编码" prop="code">
          <el-input v-model="formData.code" placeholder="请输入角色编码" />
        </el-form-item>

        <el-form-item label="数据权限" prop="dataScope">
          <el-select v-model="formData.dataScope">
            <el-option :key="0" label="全部数据" :value="0" />
            <el-option :key="1" label="部门及子部门数据" :value="1" />
            <el-option :key="2" label="本部门数据" :value="2" />
            <el-option :key="3" label="本人数据" :value="3" />
          </el-select>
        </el-form-item>

        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="formData.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">停用</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="排序" prop="sort">
          <el-input-number
            v-model="formData.sort"
            controls-position="right"
            :min="0"
            style="width: 100px"
          />
        </el-form-item>
      </el-form>
          </el-col>
          <el-col :lg="12" :xs="24"> </el-col>
        </el-row>
      </el-card>
      <el-card class="card-footer">
          <el-button type="primary" @click="handleSubmit"><i-ep-check />确 定</el-button>
          <el-button @click="closeBack"><i-ep-close />取 消</el-button>
      </el-card>
    </div>
  </template>
  
  <script setup lang="ts">
  defineOptions({
    name: "User",
    inheritAttrs: false,
  });
  
  import UserAPI from "@/api/user";
  import { UserForm } from "@/api/user/model";
  
  const router = useRouter();
  const loading = ref(false); //  加载状态
  
  const calTypeList = ref<OptionType[]>(); // 角色下拉数据源
  
  // 用户表单数据
  const formData = reactive<UserForm>({
    status: 1,
  });
  
  const radioSelected = ref('');
  
  // 校验规则
  const rules = reactive({
    username: [{ required: true, message: "不能为空", trigger: "blur" }],
    nickname: [{ required: true, message: "不能为空", trigger: "blur" }],
    deptId: [{ required: true, message: "不能为空", trigger: "blur" }],
    roleIds: [{ required: true, message: "不能为空", trigger: "blur" }],
    email: [
      {
        pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
        message: "请输入正确的邮箱地址",
        trigger: "blur",
      },
    ],
    mobile: [
      {
        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
        message: "请输入正确的手机号码",
        trigger: "blur",
      },
    ],
  });
  
  const list = [
    {
      csmc: "10.0.8.12",
      csms: "DOCKER-TOOL",
      csmc1: "acd0032a-6833-4348-b0fc-04798f94354c",
      csmc2: "华为",
      csmc3: "1.2",
      csmc4: "已连接",
    },
    {
      csmc: "192.10.71.44",
      csms: "ETL",
      csmc1: "ac1232a-6233-4348-b0fc-04798f94551",
      csmc2: "华为",
      csmc3: "1.2",
      csmc4: "已连接",
    },
  ];
  
  /** 表单提交 */
  const handleSubmit = useThrottleFn(() => {
    loading.value = true;
    setTimeout(() => {
      ElMessage.success("保存成功");
      loading.value = false;
      closeBack();
    }, 1000);
  }, 3000);
  
  /** 返回默认页面 */
  function closeBack() {
    router.replace({ path: "/system/role" });
  }
  
  onMounted(() => {
    //handleQuery();
  });
  </script>
  <style scoped lang="scss">
  .model-detail {
    :deep(.el-card__header) {
      padding: 8px 4px;
      display: flex;
      align-items: center;
    }
  }
  .sp-file {
    color: #29d;
  }
  .tb-base-info {
    line-height: 30px;
  }
  :deep(.svg-icon) {
    margin-right: 8px;
  }
  .card-footer {
    position: fixed;
    width: calc(100% - 215px);
    bottom: 0px;
    :deep(.el-card__body) {
      padding: 10px;
      .el-pagination {
        justify-content: end;
      }
    }
  }
  </style>