operation-Backend/src/views/organizationManagement/organization/organizationAdd.vue

<template>
  <div>
    <PageMain style="padding: 20px;margin-bottom: 100px;">
      <ElRow :gutter="60">
        <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
          <span class="strong">基本信息</span>
        </ElCol>
        <el-form :model="sysform" label-width="120px" :rules="sysformRules" label-position="top" ref="ruleFormRef"
          style="max-width: 1000px;" class="flex a-c f-wrap" :size="fromSize">
          <ElCol :md="24" :lg="12">
            <el-form-item label="编码" prop="sysCode">
              <el-input v-model="sysform.sysCode" placeholder="请输入编码（唯一标识）" :disabled="id?true:false" ></el-input>
              <span style="font-size: 0.7rem;color: #999;">可填写有字母数字组成的编码，用于用户登录</span>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="名称" prop="sysName">
              <el-input v-model="sysform.sysName" placeholder="请输入名称" maxlength="20" show-word-limit />
              <span style="opacity: 0;">x</span>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="管理员姓名" prop="userName">
              <el-input v-model="sysform.userName" placeholder="请输入管理员姓名" :disabled="userNameShow" />
              <span style="opacity: 0;">x</span>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="管理员账号" prop="userAccount">
              <el-input style="display: none;" type="password" />
              <el-input v-model="sysform.userAccount" placeholder="请输入登录账号" maxlength="11" show-word-limit type="text" name="formerEmployer"
                autocomplete="new-password" @blur="userAccountblur" />
              <span style="font-size: 0.7rem;color: #999;">管理员手机号将作为登录账号使用</span>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12" v-if="!id">
            <el-form-item label="登录密码" prop="password">
              <el-input style="display: none;" type="text" />
              <el-input v-model="sysform.password" placeholder="请输入登录密码" show-password type="password"
                autocomplete="new-password" />
            </el-form-item>
          </ElCol>

          <ElCol :md="24" :lg="12">
            <el-form-item label="简称">
              <el-input v-model="sysform.shortName" placeholder="请输入租户简称" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="地区" prop="provinceId">
              <el-cascader v-model="provinceoptions" style="width: 100%;" filterable clearable :options="areaOptions"
                :props="props" @change="provinceChange" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="sysform.address" type="textarea" placeholder="请输入详细地址" maxlength="50" show-word-limit />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="类型" prop="sysType">
              <el-select v-model="sysform.sysType" placeholder="请选择类型" clearable>
                <el-option v-for="(item, index) in sysTypelist" :key="index" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="租户状态" prop="available">
              <el-select v-model="sysform.available" placeholder="请选择状态" clearable>
                <el-option label="启用" :value="1" />
                <el-option label="禁用" :value="0" />
              </el-select>
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="品牌logo" prop="sysIcon">
              <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-change="sysIconupload"
                ref="upload1" :limit="1" :class="{ disabled: uploadDisabled }" :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <img v-if="sysIconList.url" :src="sysIconList.url" class="avatar" style="width: 100%;height: 100%;" />
                <el-icon v-else class="avatar-uploader-icon">
                  <Plus />
                </el-icon>
              </el-upload>
            </el-form-item>
            <span style="font-size: 0.7rem;color: #999;">建议上传 120*120的照片，大小不超过5MB</span>

          </ElCol>
          <ElCol :md="24" :lg="24" style="padding-bottom: 10px;font-size: 14px;">
            <ElDivider></ElDivider>
            <span class="strong">其他信息</span>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="联系人姓名">
              <el-input v-model="sysform.contact" placeholder="请输入联系人姓名" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="联系电话">
              <el-input v-model="sysform.telephone" placeholder="请输入联系电话" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="联系人地址">
              <el-input v-model="sysform.contactAdress" placeholder="请输入联系人地址" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="联系人职务">
              <el-input v-model="sysform.contactJob" placeholder="请输入联系人职务" />
            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="企业规模">
              <el-input v-model="sysform.businessSize" placeholder="输入企业规模">
                <template #append>人</template>
              </el-input>

            </el-form-item>
          </ElCol>
          <ElCol :md="24" :lg="12">
            <el-form-item label="法人代表">
              <el-input v-model="sysform.legalName" placeholder="输入企业法人代表姓名" />
            </el-form-item>
          </ElCol>

        </el-form>
      </ElRow>

    </PageMain>
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="submitForm(ruleFormRef)">
        保存
      </ElButton>
      <ElButton size="large" @click="router.back()">
        取消
      </ElButton>
    </FixedActionBar>
    <el-dialog v-model="dialogVisible">
      <img w-full :src="dialogImageUrl" alt="Preview Image" />
    </el-dialog>
  </div>

</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { FormRules, UploadFile, FormInstance, ComponentSize, ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import api from '@/api';
import router from '@/router';
const route = useRoute();
const id = ref(route.query.id as string);//id参数
const provinceoptions = ref()//省市区回显数据
const areaOptions = ref()//省市区数据
const uploadDisabled = ref(false)
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const ruleFormRef = ref<FormInstance>()
const fromSize = ref<ComponentSize>('large')
const userNameShow = ref(false)
const props = {
  expandTrigger: 'hover' as const,
  value: 'areaCode',
  label: 'areaCname',
  children: 'child'
}
const sysIconList = reactive({
  url: "",
})

const sysform = ref({
  id: id.value,
  sysCode: "",
  sysName: "",
  shortName: "",
  userName: "",
  userAccount: "",
  password: "",
  provinceId: "",
  cityId: "",
  districtId: "",
  address: "",
  sysType: 0,
  available: 1,
  sysIcon: "",
  contact: "",
  telephone: "",
  contactAdress: "",
  contactJob: "",
  businessSize: 0,//
  legalName: "",//法人代表

})
const sysTypelist = ref([
  {
    id: 0,
    name: "保险公司",
  },
  {
    id: 1,
    name: "保险分公司",
  },
  {
    id: 2,
    name: "保险经济公司",
  },
  {
    id: 3,
    name: "汽车经销商",
  },
  {
    id: 4,
    name: "保险代理公司",
  }
])
const validatepassword = (_rule: any, value: any, callback: any) => {
  // 定义正则表达式，例如：只允许字母、数字，长度在4到10个字符之间
  const codeRegex = /^[A-Z0-9]+$/i;
  // 判断是否为空
  if (!value) {
    return callback(new Error('请输入code编码'));
  }

  // 验证是否符合正则表达式
  if (!codeRegex.test(value)) {
    return callback(new Error('code编码格式不正确，仅支持8~20位字母或数字'));
  }

  // 验证通过
  callback();
};
const sysformRules = ref<FormRules>({
  sysCode: [
    { required: true, trigger: 'blur', message: '请输入编码（唯一标识）' },
    { min: 3, max: 20, message: '请输入3~20个字符', trigger: 'blur' },
  ],
  sysName: [
    { required: true, trigger: 'blur', message: '请输入名称' },
  ],
  shortName: [
    { required: true, trigger: 'blur', message: '请输入简称' },
  ],
  userName: [
    { required: true, trigger: 'blur', message: '请输入管理员姓名' },
  ],
  userAccount: [
    { required: true, trigger: 'blur', message: '请输入管理员账号' },
  ],
  password: [
    { required: true, trigger: 'blur', message: '请输入密码' },
    { min: 8, max: 20, message: '仅支持8~20位字母或数字', trigger: 'blur' },
    { validator: validatepassword, trigger: 'blur' }
  ],

  address: [
    { required: true, trigger: 'blur', message: '请输入详细地址' },
  ],
  sysType: [
    { required: true, trigger: 'change', message: '请选择类型' },
  ],
  sysIcon: [
    { required: true, trigger: 'blur', message: '请上传图片' },
  ],
  provinceId: [
    { required: true, trigger: 'change', message: '请选择省市区' },
  ],
  available: [
    { required: true, trigger: 'change', message: '请选择状态' },
  ],


});
onBeforeMount(() => {
  queryTreeQuery();//获取区划数据
  if (id.value) {
    detailQuery();
  }
});
const userAccountblur = (event: any) => {
  api.tenantApi.userGetPhone(event.target.value).then((res: any) => {
    if (res.code == '200' && res.data.length) {
      sysform.value.userName = res.data[0].username;
      userNameShow.value = true;
    } else {
      userNameShow.value = false;
    }
  });

}
//获取区划数据
const queryTreeQuery = () => {
  api.dept.queryTree().then((res: any) => {
    if (res.code == '200') {
      areaOptions.value = res.data;
    } else {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    }
  });
}
//详情查询
const detailQuery = () => {
  api.tenantApi.sysGet({ id: id.value }).then((res: any) => {
    if (res.code == '200') {
      sysform.value = res.data;
      sysIconList.url = res.data.sysIconUrl
      provinceoptions.value = [res.data.provinceId, res.data.cityId, res.data.districtId]

      console.log(sysIconList.url)
    } else {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    }
  });
}
//详情编辑
const detailUpdate = () => {
  console.log()
  api.tenantApi.sysEdit(sysform.value).then((res: any) => {
    if (res.code == '200') {
      ElMessage({
        type: 'success',
        message: res.msg,
        plain: true,
      })
    } else {
      ElMessage({
        type: 'error',
        message: res.msg,
        plain: true,
      })
    }
  });
}
const provinceChange = (value: any) => {
  if (value && value[0] != null && value[1] != null && value[2] != null) {
    sysform.value.provinceId = value[0];
    sysform.value.cityId = value[1];
    sysform.value.districtId = value[2];
  } else {
    sysform.value.provinceId = "";
    sysform.value.cityId = "";
    sysform.value.districtId = "";
  }
}
const handleRemove = (file: UploadFile) => {
  console.log(file)
  sysIconList.url = '';
  uploadDisabled.value = false;

}

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}


const sysIconupload = (file: any) => {
  let files = file.raw;
  const params = new FormData(); // 声明formData数据类型
  params.append("file", files);
  api.toolApi.fileupload(params).then((res: any) => {
    if (res.code == 200) {
      sysform.value.sysIcon = res.data.id;
      uploadDisabled.value = true;
    }
  })
}
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      if (id.value) {
        detailUpdate();
        router.back();

      } else {
        api.tenantApi.sysAdd(sysform.value).then((res: any) => {
          if (res.code == 200) {
            ElMessage({
              type: 'success',
              message: res.msg,
              plain: true,
            })
            router.back();

          } else {
            ElMessage({
              type: 'error',
              message: res.msg,
              plain: true,

            })
          }
        })
      }
    } else {

    }
  })
}

</script>
<style lang="scss" scoped>
.disabled :deep(.el-upload--picture-card) {
  display: none;
}

// .disabled >>> .el-upload--picture-card {
//   display: none;
// }
</style>