b2894lxlx/tuanwei-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复部分问题

Browse Source
This commit is contained in:
gxwebsoft
2023-06-05 16:50:04 +08:00
parent 6fcff7b0e1
commit 01a57c177e
17 changed files with 1355 additions and 273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/views/tower/accessory/components/accessory-edit.vue
View File

@@ -24,10 +24,11 @@
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
>
<a-form-item label="配件分类" name="accessoryCategory">
<category-select
:data="categoryList"
placeholder="请选择商品分类"
<AccessoryCategory
v-model:value="form.accessoryCategory"
valueField="label"
placeholder="请选择配件分类"
class="ele-fluid"
/>
</a-form-item>
<a-form-item label="配件规格" name="accessorySpecs">
@@ -77,11 +78,10 @@
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
>
<a-form-item label="设备型号" name="accessoryModel">
<model-select
:data="modelTree"
placeholder="请选择设备型号"
<TowerSelectModel
:placeholder="`请选择设备型号`"
v-model:value="form.accessoryModel"
@change="handleModel"
@done="chooseAccessoryModel"
/>
</a-form-item>
<a-form-item label="使用年限" name="lifeYear">
@@ -114,11 +114,6 @@
:customer-type="`产权单位`"
@done="chooseCompanyName"
/>
<!-- <DictSelect-->
<!-- dict-code="propertyCompany"-->
<!-- placeholder="请选择产权单位"-->
<!-- v-model:value="form.companyName"-->
<!-- />-->
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
@@ -175,11 +170,11 @@
<a-col
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
>
<a-form-item label="设备型号" name="accessoryModel">
<SelectWarehouse
<a-form-item label="设备型号" name="accessoryModelMultiple">
<TowerSelectModelMultiple
:placeholder="`请选择设备型号`"
v-model:value="form.accessoryModel"
@done="chooseModel"
v-model:value="form.accessoryModelMultiple"
@done="chooseMultiple"
/>
</a-form-item>
</a-col>
@@ -198,10 +193,7 @@
import { Accessory } from '@/api/tower/accessory/model';
import { useThemeStore } from '@/store/modules/theme';
import { storeToRefs } from 'pinia';
import CategorySelect from './category-select.vue';
import ModelSelect from './model-select.vue';
import { FormInstance } from 'ant-design-vue/es/form';
import { Warehouse } from '@/api/tower/warehouse/model';
import { Customer } from '@/api/oa/customer/model';
import { Category } from '@/api/goods/category/model';
import { TowerModel } from '@/api/tower/model/model';
@@ -232,6 +224,7 @@
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 表格选中数据
const formRef = ref<FormInstance | null>(null);
// 用户信息
@@ -239,8 +232,9 @@
accessoryId: undefined,
accessoryName: '',
accessoryNo: '',
accessoryCategory: '',
accessoryCategory: undefined,
accessoryModel: '',
accessoryModelMultiple: [],
accessorySpecs: '',
accessoryPrice: 0,
accessoryUnit: '',
@@ -270,7 +264,7 @@
accessoryCategory: [
{
required: true,
type: 'number',
type: 'array',
message: '请输入配件分类',
trigger: 'blur'
}
@@ -286,7 +280,7 @@
accessoryModel: [
{
required: true,
type: 'number',
type: 'string',
message: '请输入设备型号',
trigger: 'blur'
}
@@ -318,22 +312,17 @@
});
const { resetFields } = useForm(form, rules);
const chooseModel = (data: Warehouse) => {
form.accessoryModel = data.warehouseName;
};
const chooseCompanyName = (data: Customer) => {
form.companyName = data.customerName;
};
const handleModel = (index) => {
props.modelList?.map((d) => {
console.log(index);
console.log(d.categoryId);
if (index == d.categoryId) {
form.lifeYear = Number(d.yearLife);
}
const chooseAccessoryModel = (data: TowerModel) => {
form.accessoryModel = data.name?.concat(String(data.model));
form.lifeYear = data.yearLife;
};
const chooseMultiple = (data) => {
form.accessoryModelMultiple = [];
data.map((d) => {
form.accessoryModelMultiple?.push(`${d.name}${d.model}`);
});
};
@@ -346,8 +335,11 @@
.validate()
.then(() => {
loading.value = true;
console.log(form.accessoryCategory?.[0]);
const formData = {
...form
...form,
accessoryCategory: `${form.accessoryCategory?.[0]} / ${form.accessoryCategory?.[1]}`,
accessoryModelMultiple: JSON.stringify(form.accessoryModelMultiple)
};
const saveOrUpdate = isUpdate.value ? updateAccessory : addAccessory;
saveOrUpdate(formData)
@@ -371,6 +363,16 @@
if (visible) {
if (props.data) {
assignObject(form, props.data);
const accessoryCategory = String(props.data.accessoryCategory);
const split = accessoryCategory?.split(' / ');
if (typeof split == 'object') {
form.accessoryCategory = split;
}
if (props.data.accessoryModelMultiple) {
form.accessoryModelMultiple = JSON.parse(
String(form.accessoryModelMultiple)
);
}
isUpdate.value = true;
} else {
isUpdate.value = false;

36
src/views/tower/accessory/index.vue
View File

@@ -370,41 +370,6 @@
});
};
/* 查询 */
const query2 = () => {
loading.value = true;
listTowerModel()
.then((list) => {
loading.value = false;
data2List.value = list;
const eks: number[] = [];
list.forEach((d) => {
d.key = d.categoryId;
d.value = d.categoryId;
if (typeof d.categoryId === 'number') {
eks.push(d.categoryId);
}
});
expandedRowKeys.value = eks;
data2.value = toTreeData({
data: list,
idField: 'categoryId',
parentIdField: 'parentId'
});
if (list.length) {
if (typeof list[0].categoryId === 'number') {
selectedRowKeys.value = [list[0].categoryId];
}
} else {
selectedRowKeys.value = [];
}
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
};
/* 自定义行属性 */
const customRow = (record: Accessory) => {
return {
@@ -420,7 +385,6 @@
};
query();
query2();
</script>
<script lang="ts">

34
src/views/tower/equipment/components/equipment-edit.vue
View File

@@ -24,11 +24,16 @@
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
>
<a-form-item label="设备名称" name="name">
<DictSelect
dict-code="DeviceAssignment"
placeholder="请选择设备"
<TowerSelectModel
:placeholder="`请选择设备名称`"
v-model:value="form.name"
@done="chooseEquipmentName"
/>
<!-- <DictSelect-->
<!-- dict-code="DeviceAssignment"-->
<!-- placeholder="请选择设备"-->
<!-- v-model:value="form.name"-->
<!-- />-->
</a-form-item>
<a-form-item label="出厂编号" name="factoryNo">
<a-input
@@ -57,11 +62,16 @@
v-bind="styleResponsive ? { md: 8, sm: 24, xs: 24 } : { span: 8 }"
>
<a-form-item label="设备型号" name="model">
<DictSelect
dict-code="EquipmentModel"
placeholder="请选择设备型号"
<TowerSelectModel
:placeholder="`请选择设备型号`"
v-model:value="form.model"
@done="chooseEquipmentModel"
/>
<!-- <DictSelect-->
<!-- dict-code="EquipmentModel"-->
<!-- placeholder="请选择设备型号"-->
<!-- v-model:value="form.model"-->
<!-- />-->
</a-form-item>
<a-form-item label="出厂日期" name="factoryDate">
<a-date-picker
@@ -518,7 +528,7 @@
{
required: true,
type: 'string',
message: '请输入设备名称',
message: '请输入设备',
trigger: 'blur'
}
],
@@ -627,6 +637,16 @@
form.file7 = JSON.stringify(file7.value);
};
const chooseEquipmentName = (data) => {
form.name = data.name;
form.model = data.model;
};
const chooseEquipmentModel = (data) => {
form.name = data.name;
form.model = data.model;
};
const chooseWarehouse = (data: Warehouse) => {
console.log(data);
form.warehouse = data.warehouseName;

195
src/views/tower/model/components/model-edit.vue Normal file
View File

@@ -0,0 +1,195 @@
<!-- 编辑弹窗 -->
<template>
<ele-modal
:width="500"
:visible="visible"
:confirm-loading="loading"
:title="isUpdate ? '修改设备型号' : '新建设备型号'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="styleResponsive ? { md: 6, sm: 6, xs: 24 } : { flex: '90px' }"
:wrapper-col="
styleResponsive ? { md: 18, sm: 20, xs: 24 } : { flex: '1' }
"
>
<a-row :gutter="16">
<a-col
v-bind="styleResponsive ? { md: 22, sm: 24, xs: 24 } : { span: 12 }"
>
<a-form-item label="设备名称" name="name">
<a-input
allow-clear
placeholder="请输入设备名称"
v-model:value="form.name"
@pressEnter="save"
/>
</a-form-item>
<a-form-item label="设备型号" name="model">
<a-input
allow-clear
placeholder="请输入设备型号"
v-model:value="form.model"
@pressEnter="save"
/>
</a-form-item>
<a-form-item label="使用年限" name="yearLife">
<a-input-number
:min="0"
style="width: 200px"
placeholder="请输入设备使用年限"
v-model:value="form.yearLife"
/>
<span class="ml-10">年</span>
</a-form-item>
</a-col>
</a-row>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { message } from 'ant-design-vue/es';
import type { FormInstance, Rule } from 'ant-design-vue/es/form';
import { storeToRefs } from 'pinia';
import { useThemeStore } from '@/store/modules/theme';
import useFormData from '@/utils/use-form-data';
import type { TowerModel } from '@/api/tower/model/model';
import { addTowerModel, updateTowerModel } from '@/api/tower/model';
// 是否开启响应式布局
const themeStore = useThemeStore();
const { styleResponsive } = storeToRefs(themeStore);
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: TowerModel | null;
}>();
const formRef = ref<FormInstance | null>(null);
// 是否是修改
const isUpdate = ref(false);
// 提交状态
const loading = ref(false);
// 表单数据
const { form, resetFields, assignFields } = useFormData<TowerModel>({
name: '',
modelId: undefined,
model: undefined,
image: '',
status: 0,
yearLife: undefined,
sortNumber: 100
});
// 表单验证规则
const rules = reactive<Record<string, Rule[]>>({
name: [
{
required: true,
message: '请输入设备名称',
type: 'string',
trigger: 'blur'
}
],
model: [
{
required: true,
message: '请输入设备型号',
type: 'string',
trigger: 'blur'
}
],
yearLife: [
{
required: true,
message: '请输入设备使用年限',
type: 'number',
trigger: 'blur'
}
],
sortNumber: [
{
required: true,
message: '请输入排序号',
type: 'number',
trigger: 'blur'
}
]
});
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const categoryForm = {
...form
};
const saveOrUpdate = isUpdate.value ? updateTowerModel : addTowerModel;
saveOrUpdate(categoryForm)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
assignFields({
...props.data
});
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
formRef.value?.clearValidate();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 300px;
}
.ml-10 {
margin-left: 5px;
}
</style>

175
src/views/tower/model/index.vue
View File

@@ -4,17 +4,14 @@
<!-- 表格 -->
<ele-pro-table
ref="tableRef"
row-key="categoryId"
row-key="modelId"
:columns="columns"
:datasource="datasource"
:parse-data="parseData"
:customRow="customRow"
:need-page="false"
:expand-icon-column-index="1"
:expanded-row-keys="expandedRowKeys"
:scroll="{ x: 1200 }"
cache-key="proGoodsCategoryTable"
@done="onDone"
@expand="onExpand"
cache-key="towerModel"
>
<template #toolbar>
<a-space>
@@ -24,12 +21,6 @@
</template>
<span>新建</span>
</a-button>
<a-button type="dashed" class="ele-btn-icon" @click="expandAll">
展开全部
</a-button>
<a-button type="dashed" class="ele-btn-icon" @click="foldAll">
折叠全部
</a-button>
<!-- 搜索表单 -->
<a-input-search
allow-clear
@@ -41,39 +32,13 @@
</a-space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'menuType'">
<a-tag v-if="isExternalLink(record.path)" color="red">外链</a-tag>
<a-tag v-else-if="isExternalLink(record.component)" color="orange">
内链
</a-tag>
<a-tag v-else-if="isDirectory(record)" color="blue">目录</a-tag>
<a-tag v-else-if="record.menuType === 0" color="green">分类</a-tag>
<a-tag v-else-if="record.menuType === 1">按钮</a-tag>
</template>
<template v-else-if="column.key === 'title'">
<a-avatar
:size="20"
v-if="record.image"
shape="square"
:src="`${record.image}`"
/>
<a-tooltip :title="`分类ID：${record.categoryId}`">
<span>{{ record.title }}</span>
</a-tooltip>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">显示</a-tag>
<a-tag v-if="record.status === 1" color="orange">隐藏</a-tag>
</template>
<template v-else-if="column.key === 'action'">
<template v-if="column.key === 'action'">
<a-space>
<a @click="openEdit(null, record.categoryId)">添加</a>
<a-divider type="vertical" />
<a @click="openEdit(record)">修改</a>
<a-divider type="vertical" />
<a-popconfirm
placement="topRight"
title="确定要删除此分类吗？"
title="确定要删除此记录吗？"
@confirm="remove(record)"
>
<a class="ele-text-danger">删除</a>
@@ -84,13 +49,7 @@
</ele-pro-table>
</a-card>
<!-- 编辑弹窗 -->
<category-edit
v-model:visible="showEdit"
:data="current"
:parent-id="parentId"
:category-list="categoryData"
@done="reload"
/>
<ModelEdit v-model:visible="showEdit" :data="current" @done="reload" />
</div>
</template>
@@ -100,20 +59,14 @@
import { PlusOutlined } from '@ant-design/icons-vue';
import type {
DatasourceFunction,
ColumnItem,
EleProTableDone
ColumnItem
} from 'ele-admin-pro/es/ele-pro-table/types';
import {
messageLoading,
toDateString,
isExternalLink,
toTreeData,
eachTreeData
} from 'ele-admin-pro/es';
import { messageLoading, toDateString } from 'ele-admin-pro/es';
import type { EleProTable } from 'ele-admin-pro/es';
import CategoryEdit from './components/category-edit.vue';
import type { TowerModel, TowerModelParam } from '@/api/tower/model/model';
import { listTowerModel, removeTowerModel } from '@/api/tower/model';
import ModelEdit from '@/views/tower/model/components/model-edit.vue';
import { TowerEquipment } from "@/api/tower/equipment/model";
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
@@ -128,9 +81,17 @@
hideInSetting: true,
customRender: ({ index }) => index + (tableRef.value?.tableIndex ?? 0)
},
{
title: '设备名称',
dataIndex: 'name',
key: 'name',
showSorterTooltip: false,
ellipsis: true
},
{
title: '设备型号',
key: 'title',
dataIndex: 'model',
key: 'model',
showSorterTooltip: false,
ellipsis: true
},
@@ -141,22 +102,6 @@
showSorterTooltip: false,
ellipsis: true
},
{
title: '排序',
dataIndex: 'sortNumber',
sorter: true,
width: 180,
showSorterTooltip: false
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
sorter: true,
width: 180,
showSorterTooltip: false,
customRender: ({ text }) => ['显示', '隐藏'][text]
},
{
title: '创建时间',
dataIndex: 'createTime',
@@ -176,40 +121,18 @@
// 当前编辑数据
const current = ref<TowerModel | null>(null);
const searchText = ref('');
// 是否显示编辑弹窗
const showEdit = ref(false);
// 上级分类id
const parentId = ref<number>();
// 分类数据
const categoryData = ref<TowerModel[]>([]);
// 表格展开的行
const expandedRowKeys = ref<number[]>([]);
// 表格数据源
const datasource: DatasourceFunction = ({ where }) => {
if (searchText.value) {
where.keywords = searchText.value;
}
return listTowerModel({ ...where });
};
/* 数据转为树形结构 */
const parseData = (data: TowerModel[]) => {
return toTreeData({
data: data.map((d) => {
return { ...d, key: d.categoryId, value: d.categoryId };
}),
idField: 'categoryId',
parentIdField: 'parentId'
});
};
/* 表格渲染完成回调 */
const onDone: EleProTableDone<TowerModel> = ({ data }) => {
categoryData.value = data;
};
/* 刷新表格 */
const reload = (where?: TowerModelParam) => {
tableRef?.value?.reload({ where });
@@ -218,22 +141,17 @@
/* 打开编辑弹窗 */
const openEdit = (row?: TowerModel | null, id?: number) => {
current.value = row ?? null;
parentId.value = id;
showEdit.value = true;
};
const search = (searchText) => {
reload({ title: searchText });
reload({ keywords: searchText });
};
/* 删除单个 */
const remove = (row: TowerModel) => {
if (row.children?.length) {
message.error('请先删除子节点');
return;
}
const hide = messageLoading('请求中..', 0);
removeTowerModel(row.categoryId)
removeTowerModel(row.modelId)
.then((msg) => {
hide();
message.success(msg);
@@ -245,39 +163,18 @@
});
};
/* 展开全部 */
const expandAll = () => {
let keys: number[] = [];
eachTreeData(categoryData.value, (d) => {
if (d.children && d.children.length && d.categoryId) {
keys.push(d.categoryId);
/* 自定义行属性 */
const customRow = (record: TowerModel) => {
return {
// 行点击事件
onClick: () => {
// console.log(record);
},
// 行双击事件
onDblclick: () => {
openEdit(record);
}
});
expandedRowKeys.value = keys;
};
/* 折叠全部 */
const foldAll = () => {
expandedRowKeys.value = [];
};
/* 点击展开图标时触发 */
const onExpand = (expanded: boolean, record: TowerModel) => {
if (expanded) {
expandedRowKeys.value = [
...expandedRowKeys.value,
record.categoryId as number
];
} else {
expandedRowKeys.value = expandedRowKeys.value.filter(
(d) => d !== record.categoryId
);
}
};
/* 判断是否是目录 */
const isDirectory = (d: TowerModel) => {
return !!d.children?.length;
};
};
</script>

348
src/views/tower/service/components/company-edit.vue Normal file
View File

@@ -0,0 +1,348 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
:width="880"
:visible="visible"
:confirm-loading="loading"
:maskClosable="false"
:maxable="maxable"
:title="isUpdate ? '编辑企业' : '添加企业'"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
@ok="save"
>
<a-form
ref="formRef"
:model="form"
:rules="rules"
:label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
:wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
>
<a-row :gutter="16">
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="企业简称" name="shortName">
<a-input
allow-clear
:maxlength="30"
placeholder="请输入企业简称"
v-model:value="form.shortName"
/>
</a-form-item>
<a-form-item label="企业类型" name="companyTypeMultiple">
<DictSelect
dict-code="CompanyType"
placeholder="请选择企业类型"
multiple="multiple"
v-model:value="form.companyTypeMultiple"
/>
</a-form-item>
<a-form-item label="统一信用代码" name="companyCode">
<a-input
allow-clear
:maxlength="20"
placeholder="请输入社会统一信用代码"
v-model:value="form.companyCode"
/>
</a-form-item>
<a-form-item label="企业负责人" name="businessEntity">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人"
v-model:value="form.businessEntity"
/>
</a-form-item>
<a-form-item label="手机号码" name="phone">
<a-input
allow-clear
:maxlength="20"
placeholder="请填写联系人手机号码"
v-model:value="form.phone"
/>
</a-form-item>
<a-form-item label="企业logo" name="companyLogo">
<ele-image-upload
v-model:value="images"
:item-style="{ width: '90px', height: '90px' }"
:limit="1"
@upload="onUpload"
/>
</a-form-item>
</a-col>
<a-col :md="12" :sm="24" :xs="24">
<a-form-item label="企业全称" name="companyName">
<a-input
allow-clear
:maxlength="30"
placeholder="请输入企业全称"
v-model:value="form.companyName"
/>
</a-form-item>
<a-form-item label="所属区域" name="region">
<a-input-group compact>
<a-input
disabled
style="width: calc(100% - 32px)"
v-model:value="form.region"
placeholder="所属区域"
@search="onSearch"
/>
<a-tooltip title="选择位置">
<a-button @click="openMapPicker">
<template #icon><EnvironmentOutlined /></template>
</a-button>
</a-tooltip>
</a-input-group>
</a-form-item>
<a-form-item label="所属区域" name="region">
<regions-select
v-model:value="city"
valueField="label"
placeholder="请选择省市区"
class="ele-fluid"
/>
</a-form-item>
<a-form-item
label="详细地址" name="address"
>
<a-input
allow-clear
placeholder="请填写联系地址"
v-model:value="form.address"
/>
</a-form-item>
<a-form-item label="排序" name="sortNumber">
<a-input
allow-clear
:maxlength="20"
placeholder="排序"
v-model:value="form.sortNumber"
/>
</a-form-item>
<a-form-item label="备注" name="comments">
<a-textarea
:rows="4"
:maxlength="200"
placeholder="请输入备注"
v-model:value="form.comments"
/>
</a-form-item>
</a-col>
</a-row>
<!-- 地图位置选择弹窗 -->
<ele-map-picker
:need-city="true"
:dark-mode="darkMode"
v-model:visible="showMap"
:center="[108.374959, 22.767024]"
:search-type="1"
:zoom="12"
@done="onDone"
/>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import {ref, reactive, watch, computed} from 'vue';
import { Form, message } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import { addCompany, updateCompany } from '@/api/system/company';
import type { Company } from '@/api/system/company/model';
import { createCode } from '@/utils/common';
import { uploadFile } from '@/api/system/file';
import type { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
import { FILE_SERVER, FILE_THUMBNAIL } from "@/config/setting";
import { useUserStore } from '@/store/modules/user';
import DictSelect from "@/views/search/components/dict-select.vue";
import {
EnvironmentOutlined
} from '@ant-design/icons-vue';
import { useThemeStore } from "@/store/modules/theme";
import { storeToRefs } from "pinia";
import { CenterPoint } from "ele-admin-pro/es/ele-map-picker/types";
import { FormInstance } from "ant-design-vue/es/form";
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Company | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 提交状态
const loading = ref(false);
// 是否显示最大化切换按钮
const maxable = ref(true);
// 省市区
const city = ref<string[]>([]);
// 是否显示地图选择弹窗
const showMap = ref(false);
const themeStore = useThemeStore();
const { darkMode } = storeToRefs(themeStore);
// 是否是修改
const isUpdate = ref(false);
const useForm = Form.useForm;
const formRef = ref<FormInstance | null>(null);
// 用户信息
const form = reactive<Company>({
companyId: undefined,
companyName: '',
shortName: '',
companyLogo: undefined,
companyType: undefined,
companyTypeMultiple: undefined,
companyCode: undefined,
province: '',
city: '',
region: '',
address: '',
businessEntity: '',
phone: '',
comments: '',
status: undefined,
sortNumber: 100,
userId: undefined,
});
// 已上传数据, 可赋初始值用于回显
const images = ref(<any>[]);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
// 表单验证规则
const rules = reactive({
shortName: [
{
required: true,
type: 'string',
message: '请输入企业简称',
trigger: 'blur'
}
],
companyName: [
{
required: true,
type: 'string',
message: '请选择企业全称',
trigger: 'blur'
}
],
});
const { resetFields, validate, validateInfos } = useForm(form, rules);
/* 打开位置选择 */
const openMapPicker = () => {
showMap.value = true;
};
/* 地图选择后回调 */
const onDone = (location: CenterPoint) => {
console.log(location);
city.value = [
`${location.city?.province}`,
`${location.city?.city}`,
`${location.city?.district}`
];
form.province = `${location.city?.province}`;
form.city = `${location.city?.city}`;
form.region = `${location.city?.district}`;
form.address = `${location.address}`;
form.latitude = `${location.lat}`;
form.longitude = `${location.lng}`;
showMap.value = false;
};
/* 保存编辑 */
const save = () => {
if (!formRef.value) {
return;
}
formRef.value
.validate()
.then(() => {
loading.value = true;
const formData = {
...form,
// 去除空格
shortName: form.shortName?.replace(/\s*/g, ''),
companyName: form.companyName?.replace(/\s*/g, ''),
companyTypeMultiple: JSON.stringify(form.companyTypeMultiple)
};
const saveOrUpdate = isUpdate.value
? updateCompany
: addCompany;
saveOrUpdate(formData)
.then((msg) => {
loading.value = false;
message.success(msg);
updateVisible(false);
emit('done');
})
.catch((e) => {
loading.value = false;
message.error(e.message);
});
})
.catch(() => {});
};
// 上传文件
const onUpload = (d: ItemType) => {
uploadFile(<File>d.file)
.then((result) => {
form.companyLogo = result.path;
message.success('上传成功');
})
.catch((e) => {
message.error(e.message);
});
};
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(form, props.data);
// 头像赋值
images.value = [];
if(props.data.companyLogo){
images.value.push({ uid:1, url: FILE_THUMBNAIL + props.data.companyLogo, status: '' });
}
if(props.data.companyTypeMultiple){
form.companyTypeMultiple = JSON.parse(props.data.companyTypeMultiple);
}
// 所在地区
if(props.data.province){
city.value.push(props.data.province)
}
if(props.data.city){
city.value.push(props.data.city)
}
if(props.data.region){
city.value.push(props.data.region)
}
isUpdate.value = true;
} else {
isUpdate.value = false;
}
} else {
resetFields();
}
}
);
</script>
<style lang="less"></style>

148
src/views/tower/service/components/company-info.vue Normal file
View File

@@ -0,0 +1,148 @@
<!-- 用户编辑弹窗 -->
<template>
<ele-modal
width="75%"
:visible="visible"
:confirm-loading="loading"
:title="'企业详情'"
:maxable="true"
:body-style="{ paddingBottom: '8px' }"
@update:visible="updateVisible"
:footer="null"
>
<a-form
:label-col="{ md: { span: 4 }, sm: { span: 24 } }"
:wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
>
<div class="base-form" style="margin-bottom: 20px">
<a-descriptions bordered>
<a-descriptions-item label="企业名称">
{{ customer.customerName }}
</a-descriptions-item>
<a-descriptions-item label="社会统一信用代码">
{{ customer.customerCode }}
</a-descriptions-item>
<a-descriptions-item label="跟进状态">
<div color="blue" v-for="(d, index) in progress" :key="index">
<span v-if="d.value == customer.progress">{{ d.label }}</span>
</div>
</a-descriptions-item>
<a-descriptions-item label="联系人">
{{ customer.customerContacts }}
</a-descriptions-item>
<a-descriptions-item label="联系电话">
{{ customer.customerMobile }}
</a-descriptions-item>
<a-descriptions-item label="座机电话">
{{ customer.customerPhone }}
</a-descriptions-item>
<a-descriptions-item label="企业类型">
<div color="blue" v-for="(d, index) in customerType" :key="index">
<span v-if="d.value == customer.customerType">{{ d.value }}</span>
</div>
</a-descriptions-item>
<a-descriptions-item label="联系地址">
{{ customer.customerAddress }}
</a-descriptions-item>
<a-descriptions-item label="备注">
{{ customer.comments }}
</a-descriptions-item>
</a-descriptions>
<!-- <a-descriptions-->
<!-- title="其他信息"-->
<!-- :column="1"-->
<!-- bordered-->
<!-- style="margin-top: 30px"-->
<!-- >-->
<!-- <a-descriptions-item label="相关项目">-->
<!-- {{ customer.comments }}-->
<!-- </a-descriptions-item>-->
<!-- </a-descriptions>-->
</div>
</a-form>
</ele-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { assignObject } from 'ele-admin-pro';
import type { Customer } from '@/api/oa/customer/model';
import { FILE_SERVER } from '@/config/setting';
import { getDictionaryOptions } from '@/utils/common';
const useForm = Form.useForm;
const props = defineProps<{
// 弹窗是否打开
visible: boolean;
// 修改回显的数据
data?: Customer | null;
}>();
const emit = defineEmits<{
(e: 'done'): void;
(e: 'update:visible', visible: boolean): void;
}>();
// 用户信息
const customer = reactive<Customer>({
customerCode: '',
customerName: '',
customerType: undefined,
customerMobile: '',
customerAvatar: '',
customerPhone: '',
customerContacts: '',
customerAddress: '',
comments: '',
progress: '',
status: '0',
sortNumber: 100,
customerId: 0
});
// 请求状态
const loading = ref(true);
const { resetFields } = useForm(customer);
/* 更新visible */
const updateVisible = (value: boolean) => {
emit('update:visible', value);
};
/* 打开外部链接 */
// const openUrl = (record) => {
// window.open(record.panel);
// };
/* 获取字典数据 */
const customerType = getDictionaryOptions('customerType');
const progress = getDictionaryOptions('customerFollowStatus');
watch(
() => props.visible,
(visible) => {
if (visible) {
if (props.data) {
loading.value = false;
assignObject(customer, props.data);
}
} else {
resetFields();
}
}
);
</script>
<style lang="less">
.tab-pane {
min-height: 100px;
}
.card-head {
display: flex;
height: 40px;
align-items: center;
margin-bottom: 30px;
}
</style>

95
src/views/tower/service/index.vue
View File

@@ -4,7 +4,7 @@
<a-card :bordered="false" :body-style="{ padding: '16px' }">
<ele-pro-table
ref="tableRef"
row-key="customerId"
row-key="companyId"
:columns="columns"
:datasource="datasource"
v-model:selection="selection"
@@ -23,12 +23,12 @@
/>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'customerName'">
<template v-if="column.key === 'companyName'">
<a-avatar
:size="30"
:src="`${FILE_THUMBNAIL + record.customerAvatar}`"
:src="`${FILE_THUMBNAIL + record.companyLogo}`"
style="margin-right: 4px"
:srcset="`${FILE_THUMBNAIL + record.customerAvatar}`"
:srcset="`${FILE_THUMBNAIL + record.companyLogo}`"
>
<template #icon>
<UserOutlined />
@@ -36,16 +36,17 @@
</a-avatar>
<a-tooltip title="查看详情">
<a href="#" @click="openEdit(record)">{{
record.customerName
record.companyName
}}</a>
</a-tooltip>
</template>
<template v-if="column.key === 'customerType'">
<div v-for="(d, i) in JSON.parse(customerType)" :key="i">
<span v-if="d.value === record.customerType">{{
d.value
}}</span>
</div>
<template v-if="column.key === 'companyTypeMultiple'">
<a-tag
v-for="(d, i) in JSON.parse(record.companyTypeMultiple)"
:key="i"
>
<span>{{ d }}</span>
</a-tag>
</template>
<template v-if="column.key === 'status'">
<a-tag v-if="record.status === 0" color="green">正常</a-tag>
@@ -57,6 +58,10 @@
<a-avatar :src="record.userAvatar" size="small" />
</a-tooltip>
</template>
<template v-if="column.key === 'isTax'">
<a-tag v-if="record.isTax">是</a-tag>
<a-tag v-else>否</a-tag>
</template>
<template v-if="column.key === 'createTime'">
<a-tooltip :title="`${toDateString(record.createTime)}`">
{{ timeAgo(record.createTime) }}
@@ -79,11 +84,11 @@
</a-card>
<!-- 编辑弹窗 -->
<CustomerEdit v-model:visible="showEdit" :data="current" @done="reload" />
<CompanyEdit v-model:visible="showEdit" :data="current" @done="reload" />
<!-- 企业详情弹窗 -->
<CustomerInfo v-model:visible="showInfo" :data="current" @done="reload" />
<CompanyInfo v-model:visible="showInfo" :data="current" @done="reload" />
<!-- 批量转移弹窗 -->
<!-- <CustomerMove v-model:visible="showMove" :data="selection" @done="batchMove" />-->
<!-- <CompanyMove v-model:visible="showMove" :data="selection" @done="batchMove" />-->
</div>
</div>
</template>
@@ -102,30 +107,27 @@
} from 'ele-admin-pro/es/ele-pro-table/types';
import { toDateString } from 'ele-admin-pro';
import Search from './components/search.vue';
import CustomerEdit from './components/customer-edit.vue';
import CustomerInfo from './components/customer-info.vue';
import CompanyEdit from './components/company-edit.vue';
import CompanyInfo from './components/company-info.vue';
import {
pageCustomer,
removeCustomer,
removeBatchCustomer
} from '@/api/oa/customer';
pageCompany,
removeCompany,
removeBatchCompany
} from '@/api/system/company';
import { timeAgo } from 'ele-admin-pro';
import type { Customer, CustomerParam } from '@/api/oa/customer/model';
import type { Company, CompanyParam } from '@/api/system/company/model';
import { useUserStore } from '@/store/modules/user';
import { FILE_THUMBNAIL } from '@/config/setting';
const userStore = useUserStore();
// 当前用户信息
const loginUser = computed(() => userStore.info ?? {});
const customerType = localStorage.getItem('customerType');
// 表格实例
const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
// 表格选中数据
const selection = ref<Customer[]>([]);
const selection = ref<Company[]>([]);
// 当前编辑数据
const current = ref<Customer | null>(null);
const current = ref<Company | null>(null);
// 是否显示资产详情
const showInfo = ref(false);
@@ -144,11 +146,11 @@
}) => {
if (filters) {
where.progress = filters.progress;
where.customerSource = filters.customerSource;
where.customerType = filters.customerType;
where.companySource = filters.companySource;
where.companyType = filters.companyType;
where.status = filters.status;
}
return pageCustomer({
return pageCompany({
...where,
...orders,
page,
@@ -168,25 +170,26 @@
},
{
title: '企业名称',
dataIndex: 'customerName',
key: 'customerName'
dataIndex: 'companyName',
key: 'companyName'
},
{
title: '企业类型',
dataIndex: 'customerType',
key: 'customerType'
dataIndex: 'companyTypeMultiple',
key: 'companyTypeMultiple'
},
{
title: '企业负责人',
dataIndex: 'customerContacts'
dataIndex: 'businessEntity'
},
{
title: '联系电话',
dataIndex: 'customerPhone'
dataIndex: 'phone'
},
{
title: '是否含税',
dataIndex: 'customerMobile'
dataIndex: 'isTax',
key: 'isTax'
},
{
title: '操作',
@@ -198,14 +201,14 @@
]);
/* 搜索 */
const reload = (where?: CustomerParam) => {
const reload = (where?: CompanyParam) => {
console.log(where);
selection.value = [];
tableRef?.value?.reload({ where: where });
};
/* 打开编辑弹窗 */
const openEdit = (row?: Customer) => {
const openEdit = (row?: Company) => {
current.value = row ?? null;
showEdit.value = true;
};
@@ -216,15 +219,15 @@
};
/* 打开用户详情弹窗 */
const openInfo = (row?: Customer) => {
const openInfo = (row?: Company) => {
current.value = row ?? null;
showInfo.value = true;
};
/* 删除单个 */
const remove = (row: Customer) => {
const remove = (row: Company) => {
const hide = message.loading('请求中..', 0);
removeCustomer(row.customerId)
removeCompany(row.companyId)
.then((msg) => {
hide();
message.success(msg);
@@ -255,13 +258,7 @@
maskClosable: true,
onOk: () => {
const hide = message.loading('请求中..', 0);
removeBatchCustomer(
selection.value.map((d) => {
if (loginUser.value.userId === d.userId) {
return d.customerId;
}
})
)
removeBatchCompany(selection.value.map((d) => d.companyId))
.then((msg) => {
hide();
message.success(msg);
@@ -276,7 +273,7 @@
};
/* 自定义行属性 */
const customRow = (record: Customer) => {
const customRow = (record: Company) => {
return {
// 行点击事件
onClick: () => {