pay-ui/agent-ui/views/system/modules/user-edit.vue

<script setup lang="ts">
import { reactive, ref, computed } from "vue";
import * as $userApi from "@/api/sys/user";
import message from "@/utils/message";
const formRef = ref();

const checkUsername = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入帐号"));
  } else {
    if (pageData.mode === "add") {
      $userApi.hashUsername(value).then((res: any) => {
        if (res.success) {
          if (res.result) {
            callback(new Error("帐号已存在，请重新输入"));
          } else {
            callback();
          }
        } else {
          callback(new Error("帐号已存在，请重新输入"));
        }
      });
    }
  }
};
const validatePass2 = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请再次输入密码"));
  } else if (value !== pageData.formParam.infoForm.password) {
    callback(new Error("两次输入密码不正确"));
  } else {
    callback();
  }
};
const pageData: any = reactive({
  mode: "add",
  modalParam: {
    visible: false,
    title: "用户新增",
    closeOnclickModal: true
  },
  formParam: {
    formFields: [
      {
        type: "input",
        label: "帐号",
        prop: "username",
        placeholder: "请输入帐号"
      },
      {
        type: "input",
        label: "姓名",
        prop: "nickname",
        placeholder: "请输入姓名"
      },
      {
        type: "input",
        label: "密码",
        prop: "password",
        placeholder: "请输入密码",
        options: {
          type: "password",
          showPassword: true
        }
      },
      {
        type: "input",
        label: "确认密码",
        prop: "confirmPassword",
        placeholder: "请输入确认密码",
        options: {
          type: "password",
          showPassword: true
        }
      },
      {
        type: "select",
        label: "分配角色",
        prop: "roleIds",
        placeholder: "请选择分配角色",
        dataSourceKey: "roleList",
        options: {
          filterable: true,
          multiple: true,
          keys: {
            prop: "id",
            value: "id",
            label: "roleName"
          }
        }
      },
      {
        type: "select",
        label: "状态",
        prop: "enable",
        placeholder: "请选择",
        dataSourceKey: "enabledOptions",
        options: {
          keys: {
            label: "label",
            value: "value",
            prop: "value"
          },
          filterable: true
        }
      }
    ],
    infoForm: {},
    rules: {
      orgId: [{ required: true, message: "请选择所属机构", trigger: "change" }],
      username: [
        { required: true, message: "请输入帐号", trigger: "blur" },
        { min: 4, max: 20, message: "长度在 4 到 20 个字符", trigger: "blur" },
        { validator: checkUsername, trigger: "blur" },
        {
          pattern: /^[a-zA-Z0-9]{4,20}$/,
          message: "只能输入4-20个字母、数字",
          trigger: "blur"
        }
      ],
      nickname: [
        { required: true, message: "请输入姓名", trigger: "blur" },
        { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
      ],
      enable: [{ required: true, message: "请选择状态", trigger: "change" }],
      password: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
      ],
      confirmPassword: [
        { required: true, message: "请输入确认密码", trigger: "blur" },
        { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
        { validator: validatePass2, trigger: "blur" }
      ]
    },
    loading: false
  },
  dataSource: {
    enabledOptions: [],
    roleList: []
  }
});
const showFormItem = computed(() => (item: any) => {
  if (pageData.mode === "add") {
    return true;
  }
  return item.prop !== "confirmPassword" && item.prop !== "password";
});
const formFields = computed(() => {
  const fields: any[] = [
    {
      type: "input",
      label: "帐号",
      prop: "username",
      placeholder: "请输入帐号"
    },
    {
      type: "input",
      label: "姓名",
      prop: "nickname",
      placeholder: "请输入姓名"
    },
    {
      type: "select",
      label: "分配角色",
      prop: "roleIds",
      placeholder: "请选择分配角色",
      dataSourceKey: "roleList",
      options: {
        filterable: true,
        multiple: true,
        keys: {
          prop: "id",
          value: "id",
          label: "roleName"
        }
      }
    },
    {
      type: "select",
      label: "状态",
      prop: "enable",
      placeholder: "请选择",
      dataSourceKey: "enabledOptions",
      options: {
        keys: {
          label: "label",
          value: "value",
          prop: "value"
        },
        filterable: true
      }
    }
  ];
  if (pageData.mode === "add") {
    fields.splice(
      3,
      0,
      {
        type: "input",
        label: "密码",
        prop: "password",
        placeholder: "请输入密码",
        options: {
          type: "password",
          showPassword: true
        }
      },
      {
        type: "input",
        label: "确认密码",
        prop: "confirmPassword",
        placeholder: "请输入确认密码",
        options: {
          type: "password",
          showPassword: true
        }
      }
    );
  }
  return fields;
});
const formRules = computed(() => {
  const rule: any = {
    orgId: [{ required: true, message: "请选择所属机构", trigger: "change" }],
    username: [
      { required: true, message: "请输入帐号", trigger: "blur" },
      { min: 4, max: 20, message: "长度在 4 到 20 个字符", trigger: "blur" },

      {
        pattern: /^[a-zA-Z0-9]{4,20}$/,
        message: "只能输入4-20个字母、数字",
        trigger: "blur"
      }
    ],
    nickname: [
      { required: true, message: "请输入姓名", trigger: "blur" },
      { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }
    ],
    enable: [{ required: true, message: "请选择状态", trigger: "change" }]
  };

  if (pageData.mode === "add") {
    rule["password"] = [
      { required: true, message: "请输入密码", trigger: "blur" },
      { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }
    ];
    rule["confirmPassword"] = [
      { required: true, message: "请输入确认密码", trigger: "blur" },
      { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
      { validator: validatePass2, trigger: "blur" }
    ];
    rule.username.push({
      validator: checkUsername,
      trigger: "blur"
    });
  }

  return rule;
});
const disabledFields = computed(() => (item: any) => {
  if (pageData.mode === "add") {
    return false;
  }
  if (pageData.mode === "detail") {
    return true;
  }
  return item.prop === "orgId" || item.prop === "username";
});
const showBtn = computed(() => {
  if (pageData.mode === "detail") {
    return false;
  }
  return true;
});
const queryUserRoleId = () => {
  if (!pageData.formParam.infoForm.id) {
    return;
  }
  $userApi.queryRoleIds(pageData.formParam.infoForm.id).then((res: any) => {
    if (res.success) {
      pageData.formParam.infoForm.roleIds = res.result;
    }
  });
};
const open = (infoForm: any, dataSource: any, mode: string) => {
  pageData.mode = mode;
  pageData.formParam.infoForm = infoForm;
  pageData.dataSource = dataSource;
  if (mode !== "add") {
    queryUserRoleId();
  }
  if (mode === "edit") {
    pageData.modalParam.title = "会员编辑";
  }
  if (mode === "detail") {
    pageData.modalParam.closeOnclickModal = true;
  } else {
    pageData.modalParam.closeOnclickModal = false;
  }
  pageData.modalParam.visible = true;
};
const initData = () => {
  pageData.formParam.infoForm = { enable: 1 };
  pageData.formParam.loading = false;
  pageData.modalParam.closeOnclickModal = true;
  pageData.mode = "add";
  pageData.modalParam.visible = false;
};
const _handleClose = () => {
  initData();
  emits("close");
};
const handleCancel = () => {
  pageData.modalParam.visible = false;
};
const handleConfirm = () => {
  formRef.value!.validate((isValid: boolean) => {
    if (isValid) {
      if (pageData.mode === "add") {
        save();
      } else {
        update();
      }
    }
  });
};
const save = () => {
  pageData.formParam.loading = true;
  const params = pageData.formParam.infoForm;
  $userApi
    .save(params)
    .then((res: any) => {
      if (res.success) {
        initData();
        emits("confirm");
        message.success("保存成功");
      } else {
        message.error(res.message);
      }
    })
    .finally(() => {
      pageData.formParam.loading = false;
    });
};
const update = () => {
  pageData.formParam.loading = true;
  const params = pageData.formParam.infoForm;
  $userApi
    .update(params.id, params)
    .then((res: any) => {
      if (res.success) {
        initData();
        emits("confirm");
        message.success("保存成功");
      } else {
        message.error(res.message);
      }
    })
    .finally(() => {
      pageData.formParam.loading = false;
    });
};
defineOptions({
  name: "UserEdit"
});
const emits = defineEmits(["close", "confirm"]);
defineExpose({ open });
</script>

<template>
  <div>
    <el-drawer
      v-model="pageData.modalParam.visible"
      :title="pageData.modalParam.title"
      destroy-on-close
      modal
      :close-on-click-modal="pageData.modalParam.closeOnclickModal"
      :before-close="_handleClose"
    >
      <template #header>
        <span style="font-weight: 700">{{ pageData.modalParam.title }}</span>
      </template>
      <el-form
        :model="pageData.formParam.infoForm"
        :rules="formRules"
        label-position="left"
        ref="formRef"
        v-loading="pageData.formParam.loading"
      >
        <el-form-item
          v-for="(item, index) in formFields"
          :label="item.label"
          :prop="item.prop"
          :key="index"
          class="form-row"
          v-show="showFormItem(item)"
        >
          <template v-if="item.type === 'input'">
            <el-input
              v-model="pageData.formParam.infoForm[item.prop]"
              clearable
              :type="item.options?.type ?? 'text'"
              :show-password="item.options?.showPassword ?? false"
              :disabled="disabledFields(item)"
            />
          </template>
          <template v-if="item.type === 'select'">
            <el-select
              style="width: 1000%"
              v-model="pageData.formParam.infoForm[item.prop]"
              :clearable="item.options?.clearable ?? false"
              :filterable="item.options?.filterable ?? false"
              :multiple="item.options?.multiple ?? false"
              :disabled="disabledFields(item)"
            >
              <el-option
                v-for="val in pageData.dataSource[item.dataSourceKey]"
                :label="val[item.options?.keys?.label ?? 'label']"
                :key="val[item.options?.keys?.value ?? 'value']"
                :value="val[item.options?.keys?.value ?? 'value']"
              />
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-popconfirm
          title="确定放弃编辑？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="handleCancel"
        >
          <template #reference>
            <el-button v-show="showBtn" plain>取 消</el-button>
          </template>
        </el-popconfirm>
        <el-popconfirm
          title="确认提交?"
          @confirm="handleConfirm"
          confirm-button-text="确定"
          cancel-button-text="取消"
        >
          <template #reference>
            <el-button
              type="primary"
              plain
              v-show="showBtn"
              v-loading="pageData.formParam.loading"
              >提 交</el-button
            >
          </template>
        </el-popconfirm>
      </template>
    </el-drawer>
  </div>
</template>