byte-sailing-mobile/src/views/system/user/add.vue

<template>
  <div class="form">
    <van-nav-bar
      :title="$t('common.addUser')"
      :left-text="$t('common.back')"
      left-arrow
      @click-left="onClickLeft"
    >
    </van-nav-bar>

    <testForm
      v-model="formData.data"
      :formOption="formOption"
      :formConfig="formConfig"
      :rules="rules"
      @onSubmit="onSubmit"
      ref="formDom"
    ></testForm>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted, reactive } from "vue";
import { showSuccessToast, showToast } from "vant";
import { useRoute } from "vue-router";
import { getUserInfo } from "@/utils/auth";
import testForm from "@/components/testForm/index.vue";
import { handleTree } from "@/utils/ruoyi";
const proxy = getCurrentInstance().proxy;
const route = useRoute();
const show = ref(false);
const typeModal = ref(false);
const unitModal = ref(false);
const classification = ref([]);
const formData = reactive({
  data: {
    tenantId: getUserInfo().tenantId
  },
});
const formDom = ref(null);
const formOption = reactive({
  readonly: false, //用于控制整个表单是否只读
  disabled: false,
  labelAlign: "top",
  scroll: true,
  labelWidth: "62pk",
  // hiddenSubmitBtn: true,
});
const formConfig = ref([
  {
    type: "cascader",
    label: proxy.t('user.deptName'),
    prop: "deptId",
    itemType: "common",
    showPicker: false,
    data: [],
    fieldNames: {
      text: "deptName",
      value: "deptId",
      children: "children",
    },
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('user.nickName'),
    prop: "nickName",
    clearable: true,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('user.userName'),
    prop: "userName",
    clearable: true,
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('user.password'),
    prop: "password",
    clearable: true,
  },
  {
    type: "radio",
    label: proxy.t('user.userType'),
    prop: "userType",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "label",
      value: "id",
    },
    data: [
      {
        label: proxy.t('user.yes'),
        id: 1,
      },
      {
        label: proxy.t('user.no'),
        id: 0,
      },
      
    ],
  },

  {
    type: "checkbox",
    label: proxy.t('user.role'),
    prop: "roleIds",
    itemType: "onePicker",
    showPicker: false,
    fieldNames: {
      text: "roleName",
      value: "roleId",
    },
    data: [],
  },
  {
    type: "input",
    itemType: "text",
    label: proxy.t('user.phone'),
    prop: "phonenumber",
    clearable: true,
  },
  {
    type: "input",
    itemType: "number",
    label: proxy.t('user.jobNumber'),
    prop: "jobNumber",
    clearable: true,
  },
]);
const rules = {
  deptId: [{ required: true, message: proxy.t('user.deptNameCanNotBeEmpty'), }],
  nickName: [{ required: true, message: proxy.t('user.nameCanNotBeEmpty'), }],
  userName: [{ required: true, message: proxy.t('user.userNameCanNotBeEmpty'), }],
  password: [{ required: true, message: proxy.t('user.passwordCanNotBeEmpty'), }],
  roleIds: [{ required: true, message: proxy.t('user.roleCanNotBeEmpty'),}],
  phonenumber: [{ required: true, message: proxy.t('user.phoneCanNotBeEmpty'), }],
};
const unitList = ref([]);

const getUserList = () => {
  proxy
    .get("/tenantRole/list", {
      pageNum: 1,
      pageSize: 10000,
      tenantId: getUserInfo().tenantId,
    })
    .then((message) => {
      formConfig.value[5].data = message.rows.map((item) => {
        return {
          text: item.roleName,
          value: item.roleId,
        };
      });
    });
};

getUserList();
const fileList = ref([]);
const onOversize = () => {
  showToast("文件大小不能超过 5MB");
};
const onClickLeft = () => history.back();
const onSubmit = () => {
  formData.data.tenantId = getUserInfo().tenantId
  proxy
    .post("/tenantUser", formData.data, route.query.id ? "PUT" : "post")
    .then(() => {
      showSuccessToast(route.query.id ? proxy.t('common.modifySuccess') : proxy.t('common.addSuccess'))
      setTimeout(() => {
        history.back();
      }, 500);
    });
};
const treeToList = (arr) => {
  let res = []; // 用于存储递归结果（扁平数据）
  // 递归函数
  let fn = (source) => {
    source.forEach((el) => {
      res.push(el);
      el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
    });
  };
  fn(arr);
  return res;
};

const getTree = () => {
  proxy
    .get("/tenantDept/list", { tenantId: getUserInfo().tenantId })
    .then((res) => {
      formConfig.value[0].data = handleTree(res.data, "deptId");
    })
    .catch((err) => {});
};
getTree();
onMounted(() => {
  if (route.query.userId) {
    console.log(route.query);
    proxy.get(`/tenantUser/${route.query.userId}`).then((res) => {
      res.data.password = ""
      formData.data = {
        ...res.data,
        roleIds:res.roleIds
      }
    });
    
  } else {
    
  }
});
</script>