123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347 |
- <template>
- <div class="bg-white dark:!bg-[#060818]">
- <el-tabs type="border-card" class="bg-gray-100 dark:bg-[#060818]">
- <el-tab-pane label="公司信息" class="custom-tab-pane">
- <el-form :model="companyForm" :rules="stockRules" ref="companyFormRef" label-width="140px">
- <el-row>
- <el-col :span="6">
- <el-form-item label="当前套餐:" prop="company_package_id">
- <el-select v-model="companyForm.company_package_id" clearable placeholder="请选择套餐">
- <el-option v-for="item in packageList" :key="item.id" :label="item.name" :value="item.id" />
- </el-select>
- </el-form-item>
- </el-col>
- <!-- user_num -->
- <el-col :span="5">
- <el-form-item label="套餐到期时间:" prop="name">
- {{ companyForm.end_use_time }}
- </el-form-item>
- </el-col>
- <el-col :span="5">
- <el-form-item label="可绑定账户数:" prop="name">
- {{ companyForm.user_num }}
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="公司名称:" prop="name">
- <el-input v-model="companyForm.name" :minlength="2" :maxlength="20" clearable placeholder="请输入公司名称"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="统一社会信用代码:" prop="credit_code">
- <el-input v-model="companyForm.credit_code" :minlength="2" :maxlength="20" clearable placeholder="请输入统一社会信用代码"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="行业:" prop="industry">
- <el-input v-model="companyForm.industry" :minlength="2" :maxlength="20" clearable placeholder="请输入行业"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="联系人:" prop="user_name">
- <el-input v-model="companyForm.user_name" :minlength="2" :maxlength="20" clearable placeholder="请输入联系人"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="联系人电话:" prop="phone">
- <el-input v-model="companyForm.phone" :minlength="2" :maxlength="20" clearable placeholder="请输入联系人电话"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="邮箱:" prop="email">
- <el-input v-model="companyForm.email" :minlength="2" :maxlength="20" clearable placeholder="请输入邮箱"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="邮编:" prop="postal_code">
- <el-input v-model="companyForm.postal_code" :minlength="2" :maxlength="20" clearable placeholder="请输入邮箱"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="官网:" prop="website">
- <el-input v-model="companyForm.website" :minlength="2" :maxlength="20" clearable placeholder="请输入官网地址"></el-input>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="地址:" prop="">
- <el-cascader class="w-full" size="default" :options="options" clearable v-model="selectedOptions"> </el-cascader>
- <span>
- <el-input class="!w-full mt-3" v-model="companyForm.address" placeholder="请输入"></el-input>
- </span>
- </el-form-item>
- </el-col>
- <el-col :span="10">
- <el-form-item label="营业执照:" prop="license">
- <el-upload
- class="avatar-uploader"
- :action="uploadUrl"
- :show-file-list="false"
- :on-success="handleAvatarSuccess"
- :before-upload="beforeAvatarUpload"
- >
- <img v-if="companyForm.license" :src="companyForm.license" class="avatar w-28 h-28" />
- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
- </el-upload>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <div class="flex justify-center"><el-button type="primary" @click="submitWarehouseForm">保 存</el-button></div>
- </el-tab-pane>
- <el-tab-pane label="个人信息" class="custom-tab-pane">
- <el-form :model="infoForm" :rules="stockRules" ref="infoFormRef" label-width="140px">
- <el-row>
- <el-col :span="16">
- <el-form-item label="名称:" prop="nickname">
- {{ infoForm.nickname }}
- <!-- <el-input v-model="infoForm.nickname" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入公司名称"></el-input> -->
- </el-form-item>
- </el-col>
- <el-col :span="16">
- <el-form-item label="登录昵称:" prop="username">
- {{ infoForm.username }}
- <!-- <el-input v-model="infoForm.username" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入统一社会信用代码"></el-input> -->
- </el-form-item>
- </el-col>
- <el-col :span="16">
- <el-form-item label="手机号:" prop="phone">
- {{ infoForm.phone }}
- <!-- <el-input v-model="infoForm.phone" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入联系人电话"></el-input> -->
- </el-form-item>
- </el-col>
- <el-col :span="16">
- <el-form-item label="邮箱:" prop="email">
- {{ infoForm.email }}
- <!-- <el-input v-model="infoForm.email" :minlength="2" disabled :maxlength="20" clearable placeholder="请输入邮箱"></el-input> -->
- </el-form-item>
- </el-col>
- <!-- <el-col :span="16">
- <el-form-item label="部门:" prop="dept_id">
- {{ infoForm.dept_id }}
- </el-form-item>
- </el-col> -->
- <el-col :span="16">
- <el-form-item label="头像:" prop="face">
- <el-upload
- class="avatar-uploader"
- :action="uploadUrl"
- :show-file-list="false"
- :on-success="handleInfoSuccess"
- :before-upload="beforeInfoUpload"
- >
- <img v-if="infoForm.face" :src="infoForm.face" class="avatar w-28 h-28" />
- <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
- </el-upload>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <div class="flex justify-center"><el-button type="primary" @click="submitInfo">保 存</el-button></div>
- </el-tab-pane>
- </el-tabs>
- </div>
- </template>
-
- <script lang="ts" setup>
- import { ref, onMounted } from 'vue';
- import * as API_Company from '@/api/company';
- import * as API_Package from '@/api/package';
- import * as API_Auth from '@/api/auth';
- import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';
- import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
- import type { UploadProps } from 'element-plus';
- import { useStore } from 'vuex';
- import { submit } from '@/api/goodsInventoryLoss';
- const store = useStore();
- const tableData = ref<any>({});
- const uploadUrl = ref(import.meta.env.VITE_API_URL + '/uploaders');
- const companyForm = ref<any>({
- role_id: '',
- name: '',
- money: '',
- day: '',
- use_able: false,
- remark: '',
- address: '',
- license: '',
- company_package_id: '',
- });
- const stockRules = ref();
- const options = ref<any[]>(regionData);
- const selectedOptions = ref<any[]>([]);
- const loading = ref(false);
- const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
- console.log(response, uploadFile);
- companyForm.value.license = response.url; //URL.createObjectURL(uploadFile.raw!);
- };
- const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
- if (rawFile.size / 1024 / 1024 > 10) {
- ElMessage.error('Avatar picture size can not exceed 10MB!');
- return false;
- }
- return true;
- };
- /* 个人信息详情 */
- const handleInfoSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
- infoForm.value.face = response.url; //URL.createObjectURL(uploadFile.raw!);
- };
- const beforeInfoUpload: UploadProps['beforeUpload'] = (rawFile) => {
- if (rawFile.size / 1024 / 1024 > 10) {
- ElMessage.error('Avatar picture size can not exceed 10MB!');
- return false;
- }
- return true;
- };
- const adminName = (val: string[]) => {
- let text = '';
- console.log(val);
- if (val !== undefined) {
- text += codeToText[val[0]];
- text += codeToText[val[1]];
- text += codeToText[val[2]];
- }
- return text;
- };
- const companyFormRef = ref();
- const submitWarehouseForm = () => {
- companyFormRef.value.validate((valid: boolean) => {
- if (valid) {
- const params = { ...companyForm.value };
- params.province = selectedOptions.value.join(',');
- API_Company.editCompany(companyForm.value.id, params).then(() => {
- ElMessage.success('修改成功!');
- GET_CompanyList();
- });
- } else {
- ElMessage.error('表单填写有误,请核对!');
- /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
- return false;
- }
- });
- };
- const GET_CompanyList = () => {
- loading.value = true;
- API_Company.getOne('1811346086001057794')
- .then((response) => {
- loading.value = false;
- selectedOptions.value = response.province.split(',');
- /* response.records.map((el: any) => {
- if (el.province !== undefined) {
- el.license = el.license.replace('blob:', '');
- el.province = el.province.split(',');
- }
- return el;
- }); */
- companyForm.value = response;
- console.log(companyForm.value);
- })
- .catch(() => {
- loading.value = false;
- });
- };
- const packageList = ref<any>([]);
- const GET_PackageList = () => {
- API_Package.packageList({ page_no: 1, page_size: 1000, use_able: true }).then((res) => {
- packageList.value = res.records;
- });
- };
- /* 获取当前登录人详情 */
- const infoForm = ref<any>({
- face: '',
- });
- let imgUrl = ref<any>('');
- const GET_Info = () => {
- API_Auth.getAdministratorDetail(store.state.user.user.uid).then((res) => {
- infoForm.value = res;
- imgUrl.value = res.face;
- });
- };
- const submitInfo = () => {
- if (infoForm.value.face == undefined) {
- return ElMessage.error('请上传头像!');
- } else if (infoForm.value.face == imgUrl.value) {
- return ElMessage.error('请上传新的头像!');
- }
- API_Auth.editAdministrator(store.state.user.user.uid, { face: infoForm.value.face }).then((res) => {
- ElMessage.success('修改成功!');
- GET_Info();
- });
- };
- onMounted(() => {
- GET_CompanyList();
- GET_PackageList();
- GET_Info();
- });
- </script>
-
- <style scoped >
- .container {
- background-color: #fff;
- padding: 10px;
- position: relative;
- }
- .site-tag {
- margin: 0 3px;
- }
- .site-new-tag-input {
- width: 100px;
- }
- :deep(.site-logo .el-upload) {
- border: 1px dashed #d9d9d9;
- border-radius: 6px;
- cursor: pointer;
- position: relative;
- overflow: hidden;
- /* &:hover {
- border-color: #409eff;
- } */
- }
- .logo-uploader-icon {
- font-size: 20px;
- color: #8c939d;
- width: 120px;
- height: 120px;
- line-height: 120px;
- text-align: center;
- }
- .site-logo-img {
- width: 120px;
- height: 120px;
- display: block;
- }
- .image-pane .el-input-group {
- width: 200px;
- }
- .point-pane .el-input-group {
- width: 200px;
- }
- .custom-tabs {
- @apply dark:bg-[#060818];
- }
- :deep(.el-tabs__header) {
- @apply dark:bg-[#060818];
- }
- :deep(.custom-tab-pane) {
- @apply dark:bg-[#060818];
- }
- :deep(.el-tabs__item.is-active) {
- @apply dark:bg-[#060818]; /* 替换为你想要的 Tailwind CSS 背景色类 */
- }
- </style>
|