|
@@ -0,0 +1,388 @@
|
|
|
|
+<template>
|
|
|
|
+ <div>
|
|
|
|
+ <en-table-layout :tableData="tableData.records" :loading="loading">
|
|
|
|
+ <template #toolbar>
|
|
|
|
+ <div class="inner-toolbar w-11/12 flex justify-between">
|
|
|
|
+ <div class="toolbar-btns">
|
|
|
|
+ <el-button size="mini" v-if="checkPermission(['warehouse:add'])" type="primary" @click="handleAddWarehouse">新增</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ <div class="toolbar-search">
|
|
|
|
+ <en-table-search @search="searchEvent" placeholder="请输入关键字搜索" />
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+
|
|
|
|
+ <template #table-columns>
|
|
|
|
+ <el-table-column prop="name" label="公司名称" />
|
|
|
|
+ <el-table-column prop="industry" label="行业" />
|
|
|
|
+ <el-table-column prop="user_name" label="联系人" />
|
|
|
|
+ <el-table-column prop="phone" label="电话" />
|
|
|
|
+ <el-table-column prop="email" label="邮箱" />
|
|
|
|
+ <el-table-column label="地址">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ {{ adminName(scope.row.province) + scope.row.address }}
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+
|
|
|
|
+ <el-table-column label="操作">
|
|
|
|
+ <template #default="scope">
|
|
|
|
+ <el-button size="mini" v-if="checkPermission(['warehouse:update'])" @click="handleEditWarehouse(scope.$index, scope.row)">编辑</el-button>
|
|
|
|
+ <el-button size="mini" v-if="checkPermission(['warehouse:update'])" @click="handleRenew(scope.$index, scope.row)">续费</el-button>
|
|
|
|
+ </template>
|
|
|
|
+ </el-table-column>
|
|
|
|
+ </template>
|
|
|
|
+ <template #pagination>
|
|
|
|
+ <el-pagination
|
|
|
|
+ v-if="tableData.data && tableData.data.length"
|
|
|
|
+ @size-change="handlePageSizeChange"
|
|
|
|
+ @current-change="handlePageCurrentChange"
|
|
|
|
+ :current-page="tableData.page_no"
|
|
|
|
+ :page-sizes="[10, 20, 50, 100]"
|
|
|
|
+ :page-size="tableData.page_size"
|
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
+ :total="tableData.data_total"
|
|
|
|
+ >
|
|
|
|
+ </el-pagination>
|
|
|
|
+ </template>
|
|
|
|
+ </en-table-layout>
|
|
|
|
+
|
|
|
|
+ <el-dialog
|
|
|
|
+ :title="companyForm.id ? '编辑公司' : '新建公司'"
|
|
|
|
+ v-model="dialogVisible"
|
|
|
|
+ @open="handleDialogOpen"
|
|
|
|
+ :modal-append-to-body="false"
|
|
|
|
+ :close-on-click-modal="false"
|
|
|
|
+ :close-on-press-escape="false"
|
|
|
|
+ >
|
|
|
|
+ <el-form :model="companyForm" :rules="stockRules" ref="companyFormRef" label-width="140px">
|
|
|
|
+ <el-row>
|
|
|
|
+ <el-col :span="10" v-if="!companyForm.id">
|
|
|
|
+ <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>
|
|
|
|
+ <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="http://192.168.8.101:9998/uploaders"
|
|
|
|
+ :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>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <div class="dialog-footer">
|
|
|
|
+ <el-button @click="dialogVisible = false">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="submitWarehouseForm">确 定</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ <el-dialog title="续费" v-model="renewVisible" :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false">
|
|
|
|
+ <el-form :model="packageForm" :rules="stockRules" ref="packageFormRef" label-width="140px">
|
|
|
|
+ <el-form-item label="套餐:" prop="company_package_id">
|
|
|
|
+ <el-select v-model="packageForm.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-form>
|
|
|
|
+ <template #footer>
|
|
|
|
+ <div class="dialog-footer">
|
|
|
|
+ <el-button @click="renewVisible = false">取 消</el-button>
|
|
|
|
+ <el-button type="primary" @click="submitPackageForm">确 定</el-button>
|
|
|
|
+ </div>
|
|
|
|
+ </template>
|
|
|
|
+ </el-dialog>
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+ <script lang="ts" setup>
|
|
|
|
+import { ref, onMounted } from 'vue';
|
|
|
|
+import { useStore } from 'vuex';
|
|
|
|
+import { ElMessageBox, FormInstance, ElMessage } from 'element-plus';
|
|
|
|
+import * as API_BasicSetting from '@/api/basicSetting';
|
|
|
|
+import * as API_Setting from '@/api/setting';
|
|
|
|
+import * as API_Company from '@/api/company';
|
|
|
|
+import * as API_Package from '@/api/package';
|
|
|
|
+import Storage from '@/utils/storage';
|
|
|
|
+import router from '@/router';
|
|
|
|
+import { provinceAndCityData, pcTextArr, regionData, pcaTextArr, codeToText } from 'element-china-area-data';
|
|
|
|
+import { Plus } from '@element-plus/icons-vue';
|
|
|
|
+import type { UploadProps } from 'element-plus';
|
|
|
|
+
|
|
|
|
+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 store = useStore();
|
|
|
|
+const tableData = ref<any>({});
|
|
|
|
+const loading = ref(false);
|
|
|
|
+const dialogVisible = ref(false);
|
|
|
|
+const companyForm = ref<any>({
|
|
|
|
+ role_id: '',
|
|
|
|
+ name: '',
|
|
|
|
+ money: '',
|
|
|
|
+ day: '',
|
|
|
|
+ use_able: false,
|
|
|
|
+ remark: '',
|
|
|
|
+ address: '',
|
|
|
|
+ license: '',
|
|
|
|
+ company_package_id: '',
|
|
|
|
+});
|
|
|
|
+const stockRules = ref<any>({
|
|
|
|
+ role_id: [{ required: true, message: '请选择权限!', trigger: 'change' }],
|
|
|
|
+ name: [{ required: true, message: '请输入公司名称!', trigger: 'blur' }],
|
|
|
|
+ credit_code: [{ required: true, message: '请输入统一社会信用代码!', trigger: 'blur' }],
|
|
|
|
+ industry: [{ required: true, message: '请输入行业!', trigger: 'blur' }],
|
|
|
|
+ user_name: [{ required: true, message: '请输入联系人姓名!', trigger: 'blur' }],
|
|
|
|
+ phone: [
|
|
|
|
+ { required: true, message: '请输入联系人电话!', trigger: 'blur' },
|
|
|
|
+ { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' },
|
|
|
|
+ ],
|
|
|
|
+ email: [
|
|
|
|
+ { required: true, message: '请输入邮箱!', trigger: 'blur' },
|
|
|
|
+ { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] },
|
|
|
|
+ ],
|
|
|
|
+ postal_code: [
|
|
|
|
+ { required: true, message: '请输入邮编!', trigger: 'blur' },
|
|
|
|
+ { pattern: /^[1-9]\d{5}$/, message: '请输入有效的邮政编码', trigger: 'blur' },
|
|
|
|
+ ],
|
|
|
|
+});
|
|
|
|
+const selectedOptions = ref<any[]>([]);
|
|
|
|
+const marketingList = ref<any[]>([]);
|
|
|
|
+const options = ref<any[]>(regionData);
|
|
|
|
+const params = ref({
|
|
|
|
+ data: [],
|
|
|
|
+ page_no: 1,
|
|
|
|
+ page_size: 10,
|
|
|
|
+ keyword: '',
|
|
|
|
+});
|
|
|
|
+const roleArray = ref<any[]>([]);
|
|
|
|
+
|
|
|
|
+const renewVisible = ref(false);
|
|
|
|
+/* 套餐 */
|
|
|
|
+const packageForm = ref({
|
|
|
|
+ company_package_id: '',
|
|
|
|
+ this_money: '',
|
|
|
|
+});
|
|
|
|
+const packageFormRef = ref();
|
|
|
|
+/* 续费 */
|
|
|
|
+const handleRenew = (index: number, row: any) => {
|
|
|
|
+ renewVisible.value = true;
|
|
|
|
+};
|
|
|
|
+const submitPackageForm = () => {
|
|
|
|
+ companyFormRef.value.validate((valid: boolean) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ API_Company.renewCompany(id, params).then(res=>{
|
|
|
|
+
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+const companyFormRef = ref();
|
|
|
|
+const checkPermission = (permissions: string[]): boolean => {
|
|
|
|
+ // Implement your permission check logic here
|
|
|
|
+ return true;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const handleAddWarehouse = () => {
|
|
|
|
+ selectedOptions.value = [];
|
|
|
|
+ companyForm.value = {};
|
|
|
|
+ dialogVisible.value = true;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const handleEditWarehouse = (index: number, row: any) => {
|
|
|
|
+ companyForm.value = { ...row };
|
|
|
|
+ selectedOptions.value = row.province;
|
|
|
|
+ console.log(companyForm);
|
|
|
|
+ dialogVisible.value = true;
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const searchEvent = (keyword: string) => {
|
|
|
|
+ params.value = {
|
|
|
|
+ ...params.value,
|
|
|
|
+ keyword: keyword,
|
|
|
|
+ };
|
|
|
|
+ params.value.page_no = 1;
|
|
|
|
+ GET_CompanyList();
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const handlePageSizeChange = (size: number) => {
|
|
|
|
+ params.value.page_size = size;
|
|
|
|
+ GET_CompanyList();
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const handlePageCurrentChange = (page: number) => {
|
|
|
|
+ params.value.page_no = page;
|
|
|
|
+ GET_CompanyList();
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const handleDialogOpen = () => {
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ companyFormRef.value.clearValidate();
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const submitWarehouseForm = () => {
|
|
|
|
+ companyFormRef.value.validate((valid: boolean) => {
|
|
|
|
+ if (valid) {
|
|
|
|
+ const { id } = companyForm.value;
|
|
|
|
+ const params = { ...companyForm.value };
|
|
|
|
+ params.province = selectedOptions.value.join(',');
|
|
|
|
+ if (id) {
|
|
|
|
+ API_Company.editCompany(id, params).then(() => {
|
|
|
|
+ dialogVisible.value = false;
|
|
|
|
+ ElMessage.success('修改成功!');
|
|
|
|
+ GET_CompanyList();
|
|
|
|
+ });
|
|
|
|
+ } else {
|
|
|
|
+ API_Company.addCompany(params).then(() => {
|
|
|
|
+ dialogVisible.value = false;
|
|
|
|
+ ElMessage.success('添加成功!');
|
|
|
|
+ GET_CompanyList();
|
|
|
|
+ });
|
|
|
|
+ }
|
|
|
|
+ } else {
|
|
|
|
+ ElMessage.error('表单填写有误,请核对!');
|
|
|
|
+ /* store.dispatch('showMessage', { message: '表单填写有误,请核对!', type: 'error' }); */
|
|
|
|
+ return false;
|
|
|
|
+ }
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const GET_CompanyList = () => {
|
|
|
|
+ loading.value = true;
|
|
|
|
+ API_Company.getPage(params.value)
|
|
|
|
+ .then((response) => {
|
|
|
|
+ loading.value = false;
|
|
|
|
+ response.records.map((el: any) => {
|
|
|
|
+ if (el.province !== undefined) {
|
|
|
|
+ el.license = el.license.replace('blob:', '');
|
|
|
|
+ el.province = el.province.split(',');
|
|
|
|
+ }
|
|
|
|
+ return el;
|
|
|
|
+ });
|
|
|
|
+ tableData.value = response;
|
|
|
|
+ console.log(tableData.value);
|
|
|
|
+ })
|
|
|
|
+ .catch(() => {
|
|
|
|
+ loading.value = false;
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+
|
|
|
|
+const GET_MarketingList = () => {
|
|
|
|
+ API_BasicSetting.getUserByDept().then((res) => {
|
|
|
|
+ marketingList.value = res;
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+/* 获取公司列表 */
|
|
|
|
+const packageList = ref([]);
|
|
|
|
+const GET_PackageList = () => {
|
|
|
|
+ API_Package.packageList({ page_no: 1, page_size: 1000, use_able: true }).then((res) => {
|
|
|
|
+ packageList.value = res.records;
|
|
|
|
+ });
|
|
|
|
+};
|
|
|
|
+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;
|
|
|
|
+};
|
|
|
|
+onMounted(() => {
|
|
|
|
+ GET_CompanyList();
|
|
|
|
+ GET_MarketingList();
|
|
|
|
+ GET_PackageList();
|
|
|
|
+});
|
|
|
|
+</script>
|
|
|
|
+<style>
|
|
|
|
+.avatar-uploader .el-upload {
|
|
|
|
+ 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: 112px;
|
|
|
|
+ height: 112px;
|
|
|
|
+ text-align: center;
|
|
|
|
+}
|
|
|
|
+</style>
|