TaskSystem-admin/src/views/permission/admin/edit.vue

<template>
  <div class="edit-popup">
    <popup
      ref="popupRef"
      :title="popupTitle"
      :async="true"
      width="80%"
      @confirm="handleSubmit"
      @close="handleClose"
    >
      <el-form
        ref="formRef"
        :model="formData"
        label-width="84px"
        :rules="formRules"
      >
        <div style="font-size: 1.2rem; margin: 10px 0">基本信息创建</div>

        <div class="headimg">
          <el-upload
            :disabled="isCheck"
            v-model="formData.avatar"
            class="avatar-uploader-head"
            action="https://worker-task.lihaink.cn/api/upload/image"
            :show-file-list="false"
            :on-success="handleAvatarSuccessAvatar"
          >
            <img v-if="formData.avatar" :src="formData.avatar" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon">
              <Plus />
            </el-icon>
          </el-upload>
        </div>

        <el-col style="flex: 8" class="pt-6 !border-none">
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="name">
                <el-input
                  :disabled="isCheck"
                  v-model="formData.name"
                  placeholder="请输入姓名"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-select
                  v-model="formData.sex"
                  placeholder="请选择性别"
                  :disabled="isCheck"
                  :style="{ width: '100%' }"
                >
                  <el-option label="男" value="1" />
                  <el-option label="女" value="2" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="id_card">
                <el-input
                  :disabled="isCheck"
                  v-model="formData.id_card"
                  placeholder="请输入身份证号"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="account">
                <el-input
                  :disabled="isCheck"
                  v-model="formData.account"
                  placeholder="请输入联系电话"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-form-item label="省" prop="province" style="flex: 1">
              <el-select
                :disabled="isCheck"
                v-model="formData.province"
                placeholder="请选择省"
                clearable
                @change="province_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.provinceOptions"
                  :key="index"
                  :label="item.province_name"
                  :value="item.province_code"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="市" prop="city" style="flex: 1">
              <el-select
                :disabled="isCheck"
                v-model="formData.city"
                placeholder="请选择市"
                clearable
                @change="city_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.cityOptions"
                  :key="index"
                  :label="item.city_name"
                  :value="item.city_code"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="区" prop="area" style="flex: 1">
              <el-select
                :disabled="isCheck"
                v-model="formData.area"
                placeholder="请选择区"
                clearable
                @change="area_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.areaOptions"
                  :key="index"
                  :label="item.area_name"
                  :value="item.area_code"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="镇" prop="street" style="flex: 1">
              <el-select
                :disabled="isCheck"
                v-model="formData.street"
                placeholder="请选择镇"
                clearable
                @change="street_change"
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="(item, index) in datas.streetOptions"
                  :key="index"
                  :label="item.street_name"
                  :value="item.street_code"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="村社小队" prop="address" style="flex: 1.5">
              <el-input
                :disabled="isCheck"
                v-model="formData.address"
                placeholder="请输入村社小队"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="12">
              <el-form-item label="授权身份" prop="role_id">
                <el-select
                  v-model="formData.role_id"
                  :disabled="formData.root == 1 || isCheck"
                  placeholder="请选择授权身份"
                  :style="{ width: '100%' }"
                  clearable
                >
                  <el-option
                    v-if="formData.root == 1"
                    label="系统管理员"
                    :value="0"
                  />
                  <el-option
                    v-for="(item, index) in optionsData.role"
                    :key="index"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="签约方" prop="field130">
                <el-input
                  :disabled="isCheck"
                  v-model="formData.party_a_name"
                  placeholder="请选择签约方"
                  clearable
                  :style="{ width: '100%' }"
                  @click="isCompany = true"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <div style="font-size: 1.2rem; margin: 10px 0">资质信息</div>
        <el-col :span="24">
          <el-row>
            <el-col :span="8">
              <el-form-item label="身份证" prop="id_card">
                <el-upload
                  :disabled="isCheck"
                  v-model="formData.qualification.id_card"
                  class="avatar-uploader"
                  :data="{ cid: 1 }"
                  action="https://worker-task.lihaink.cn/api/upload/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessIdA"
                >
                  <img
                    v-if="formData.qualification.id_card"
                    :src="formData.qualification.id_card"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
                <el-upload
                  :disabled="isCheck"
                  v-model="formData.qualification.id_card_b"
                  class="avatar-uploader"
                  :data="{ cid: 1 }"
                  action="https://worker-task.lihaink.cn/api/upload/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessIdB"
                >
                  <img
                    v-if="formData.qualification.id_card_b"
                    :src="formData.qualification.id_card_b"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="行驶证" prop="car_card">
                <el-upload
                  :disabled="isCheck"
                  v-model="formData.qualification.car_card"
                  class="avatar-uploader"
                  :data="{ cid: 1 }"
                  action="https://worker-task.lihaink.cn/api/upload/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessCarA"
                >
                  <img
                    v-if="formData.qualification.car_card"
                    :src="formData.qualification.car_card"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
                <el-upload
                  :disabled="isCheck"
                  v-model="formData.qualification.car_card_b"
                  class="avatar-uploader"
                  :data="{ cid: 1 }"
                  action="https://worker-task.lihaink.cn/api/upload/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessCarB"
                  :before-upload="beforeAvatarUpload_two"
                >
                  <img
                    v-if="formData.qualification.car_card_b"
                    :src="formData.qualification.car_card_b"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行卡号" prop="bank_account">
                <el-upload
                  :disabled="isCheck"
                  v-model="formData.qualification.bank_account"
                  class="avatar-uploader"
                  :data="{ cid: 1 }"
                  action="https://worker-task.lihaink.cn/api/upload/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessBankA"
                  :before-upload="beforeAvatarUpload_three"
                >
                  <img
                    v-if="formData.qualification.bank_account"
                    :src="formData.qualification.bank_account"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
                <el-upload
                  :disabled="isCheck"
                  v-model="formData.qualification.bank_account_b"
                  class="avatar-uploader"
                  :data="{ cid: 1 }"
                  action="https://worker-task.lihaink.cn/api/upload/image"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccessBankB"
                  :before-upload="beforeAvatarUpload_three"
                >
                  <img
                    v-if="formData.qualification.bank_account_b"
                    :src="formData.qualification.bank_account_b"
                    class="avatar"
                  />
                  <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                  </el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="12">
              <el-form-item label="签约姓名" prop="name">
                <el-input
                  v-model="formData.name"
                  placeholder="请输入签约姓名"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="性别" prop="sex">
                <el-input
                  placeholder="请输入性别"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                  :value="formData.sex == 1 ? '男' : '女'"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="id_card">
                <el-input
                  v-model="formData.id_card"
                  placeholder="请输入身份证号"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话" prop="account">
                <el-input
                  v-model="formData.account"
                  placeholder="请输入联系电话"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.name">
              <el-form-item label="账号" prop="account">
                <el-input
                  v-model="formData.account"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" v-if="formData.name">
              <el-form-item label="密码" prop="password">
                <el-input
                  v-model="formData.account"
                  :disabled="true"
                  clearable
                  :style="{ width: '100%' }"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="合同类型" prop="contract_type">
                <el-col :span="24">
                  <el-select
                    :disabled="isCheck"
                    v-model="formData.contract_type"
                    placeholder="请选择合同类型"
                    clearable
                    :style="{ width: '100%' }"
                  >
                    <el-option
                      v-for="(item, index) in datas.contract_type"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24" v-if="!isCheck">
          <el-form-item label="合同上传" prop="field127">
            <el-upload
              :headers="{ Token: userStore.token }"
              v-model="formData.file"
              class="upload-demo"
              action="https://worker-task.lihaink.cn/adminapi/upload/file"
              :on-success="handleAvatarSuccess_four"
              multiple
              :limit="1"
            >
              <el-button type="primary">上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-form>
    </popup>
    <el-dialog v-model="isCompany" title="选择签约方" width="60%">
      <DialogIndex @customEvent="customEvent" />
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance, UploadProps } from "element-plus";
import Popup from "@/components/popup/index.vue";
import { useDictOptions } from "@/hooks/useDictOptions";
import {
  adminAdd,
  adminDetail,
  adminEdit,
  generateGontract,
} from "@/api/perms/admin";
import { roleAll } from "@/api/perms/role";
import { jobsAll } from "@/api/org/post";
import { deptAll } from "@/api/org/department";
import {
  apiCityList,
  apiAreaList,
  apiStreetList,
  apiProvinceList,
} from "@/api/common";
import { dictDataLists } from "@/api/setting/dict";
import DialogIndex from "./dialog_index.vue";
import useUserStore from "@/stores/modules/user";
defineProps({
  isCheck: {},
});

const emit = defineEmits(["success", "close"]);
const formRef = shallowRef<FormInstance>();
const popupRef = shallowRef<InstanceType<typeof Popup>>();
const mode = ref("add");
console.log(mode);
const popupTitle = computed(() => {
  return mode.value == "edit" ? "编辑管理员" : "新增管理员";
});
const formData = reactive({
  id: "",
  sex: "",
  id_card: "",
  name: "",
  province: "120000",
  city: "",
  area: "",
  street: "",
  address: "",
  account: "",
  is_contract: 0,
  // 签约方
  party_a_name: "",
  qualification: {
    id_card: "",
    id_card_b: "",
    car_card: "",
    car_card_b: "",
    bank_account: "",
    bank_account_b: "",
  },
  // 合同类型
  contract_type: "",
  party_a: "",
  file: "",
  role_id: "",
  avatar: "",
  multipoint_login: 1,
  root: 0,
});
// 字典信息
const datas: any = reactive({
  provinceOptions: [],
  cityOptions: [],
  areaOptions: [],
  streetOptions: [],
  dictTypeLists: [],
  contract_type: [],
  contract: [],
});
const userStore = useUserStore();
const getcontract_type = async () => {
  const data = await dictDataLists({ type_id: 7 });
  datas["contract_type"] = data["lists"];
};
getcontract_type();

const isCompany = ref(false);
function customEvent(data: any) {
  isCompany.value = false;
  //   formData.contract.party_a = data.id
  console.log(data);
  formData.party_a_name = data.company_name;
}
// 表单验证
// 手机号校验
const ValidatorPhone = (rule: object, value: string, callback: any) => {
  const rg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
  rg.test(formData.account)
    ? callback()
    : callback(new Error("请输入正确的手机号"));
};
// 身份证校验
const ValidatorId = (rule: object, value: string, callback: any) => {
  const rg =
    /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
  rg.test(formData.id_card)
    ? callback()
    : callback(new Error("请输入正确的身份证号码"));
};
const Validatorcard = (rule: object, value: string, callback: any) => {
  formData.qualification.car_card
    ? callback()
    : callback(new Error("请输入驾驶证正面"));
};
const ValidatorcardB = (rule: object, value: string, callback: any) => {
  formData.qualification.car_card_b
    ? callback()
    : callback(new Error("请输入驾驶证反面"));
};
const ValidatorBankcard = (rule: object, value: string, callback: any) => {
  formData.qualification.bank_account
    ? callback()
    : callback(new Error("请输入银行卡正面"));
};
const ValidatorBankcardB = (rule: object, value: string, callback: any) => {
  formData.qualification.bank_account_b
    ? callback()
    : callback(new Error("请输入银行卡反面"));
};
const formRules = reactive({
  account: [
    {
      required: true,
      trigger: ["blur"],
      validator: ValidatorPhone,
    },
  ],
  id_card: [
    {
      required: true,
      trigger: ["blur"],
      validator: ValidatorId,
    },
  ],
  sex: [
    {
      required: true,
      message: "请选择性别",
      trigger: ["blur"],
    },
  ],

  name: [
    {
      required: true,
      message: "请输入名称",
      trigger: ["blur"],
    },
  ],
  car_card: [
    {
      required: true,
      trigger: ["change"],
      validator: Validatorcard,
    },
  ],
  car_card_b: [
    {
      required: true,
      trigger: ["blur"],
      validator: ValidatorcardB,
    },
  ],
  bank_account: [
    {
      required: true,
      trigger: ["change"],
      validator: ValidatorBankcard,
    },
  ],
  bank_account_b: [
    {
      required: true,
      trigger: ["change"],
      validator: ValidatorBankcardB,
    },
  ],
  role_id: [
    {
      required: true,
      message: "请选择角色",
      trigger: ["blur"],
    },
  ],
});
// 表单验证结束
const { optionsData } = useDictOptions<{
  role: any[];
  jobs: any[];
  dept: any[];
}>({
  role: {
    api: roleAll,
  },
  jobs: {
    api: jobsAll,
  },
  dept: {
    api: deptAll,
  },
});

const handleSubmit = async () => {
  await formRef.value?.validate();
  mode.value == "edit"
    ? await adminEdit(formData)
    : await adminAdd(formData).then((res) => console.log(res));
  popupRef.value?.close();
  emit("success");
};

const open = (type = "add") => {
  mode.value = type;
  popupRef.value?.open();
};
// 图片上传成功返回的url
const handleAvatarSuccessIdA: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.qualification.id_card = response.data.uri;
};
const handleAvatarSuccessAvatar: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.avatar = response.data.uri;
};
const handleAvatarSuccessIdB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.qualification.id_card_b = response.data.uri;
};
const handleAvatarSuccessCarA: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.qualification.car_card = response.data.uri;
};
const handleAvatarSuccessCarB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.qualification.car_card_b = response.data.uri;
};
const beforeAvatarUpload_two: UploadProps["beforeUpload"] = (rawFile) => {
  return true;
};
const handleAvatarSuccessBankA: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.qualification.bank_account = response.data.uri;
};
const handleAvatarSuccessBankB: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.qualification.bank_account_b = response.data.uri;
};
const handleAvatarSuccess_four: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  formData.file = response.data.uri;
};
const beforeAvatarUpload_three: UploadProps["beforeUpload"] = (rawFile) => {
  return true;
};

//获取省份
function province_change(value: string) {
  getCityList();
}
function city_change(value: string) {
  getAreaList();
}
function area_change(value: string) {
  getStreetList();
}
function street_change(value: string) {
  formData.street = value;
}
const getProvinceList = async () => {
  const data = await apiProvinceList({});
  datas["provinceOptions"] = data;
};
const getCityList = async () => {
  const data = await apiCityList({ city: formData.province });
  datas["cityOptions"] = data;
};
const getAreaList = async () => {
  const data = await apiAreaList({ area: formData.city });
  datas["areaOptions"] = data;
};
const getStreetList = async () => {
  const data = await apiStreetList({ street: formData.area });
  datas["streetOptions"] = data;
};
getProvinceList();

const setFormData = async (row: any) => {
  const data = await adminDetail({
    id: row.id,
  });
  for (const key in formData) {
    const stringArr = ["sex", "province", "city", "area", "street"];
    if (data[key] != null && data[key] != undefined) {
      //@ts-ignore
      key == "role_id"
        ? (formData[key] = data[key][0])
        : (formData[key] = data[key]);
      if (stringArr.includes(key)) formData[key] = formData[key].toString();
    }
  }
  await getCityList();
  await getAreaList();
  await getStreetList();
};

const handleClose = () => {
  emit("close");
};
defineExpose({
  open,
  setFormData,
});
</script>

<style lang="scss">
.headimg {
  width: 6.5vw;
  height: 8vw;
  overflow: hidden;
  float: left;
  margin-top: 24px;
}

.avatar-uploader-head .el-upload {
  width: 7vw;
  height: 8.5vw;
  background-color: #fff;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload {
  width: 10vw;
  height: 6.3vw;
  background-color: #fff;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>