This commit is contained in:
quantulr
2023-11-16 17:26:32 +08:00
parent 7483153aaf
commit ad9dd06944
3 changed files with 331 additions and 162 deletions

View File

@ -0,0 +1,110 @@
<script setup>
import {reactive, ref, toRefs} from "vue";
import Pagination from "@/components/Pagination/index.vue";
import {Table as ATable} from "ant-design-vue";
const props = defineProps({
show: {
type: Boolean,
default: false,
},
multiple: {
type: Boolean,
default: true,
},
filter: {
type: Object,
default: {},
},
rowKey: {
type: String,
required: true,
},
columns: {
type: Array,
required: true,
},
fetcher: {
type: Function,
required: true,
},
});
const {filter} = toRefs(props);
const emits = defineEmits(["update:show", "selected"]);
const data = reactive({
queryParams: {
pageNum: 1,
pageSize: 10,
},
});
const {queryParams} = toRefs(data);
const dataList = ref([]);
const loading = ref(false);
const total = ref(0);
const ids = ref([]);
const handleClose = () => {
ids.value = [];
emits("update:show", false);
};
const getList = () => {
loading.value = true;
props
.fetcher({...queryParams.value, ...filter.value})
.then((resp) => {
dataList.value = resp.rows;
total.value = resp.total;
})
.finally(() => {
loading.value = false;
});
};
const handleSelectionChange = (keys) => {
ids.value = keys;
};
const cancel = () => {
emits("update:show", false);
};
const submit = () => {
emits("selected", ids.value);
handleClose();
};
</script>
<template>
<el-dialog :model-value="show" title="从表格中选择" @close="handleClose" @open="getList">
<a-table
:pagination="false"
:row-key="rowKey"
:data-source="dataList"
:columns="columns"
:row-selection="{
type: multiple ? 'checkbox' : 'radio',
selectedRowKeys: ids,
preserveSelectedRowKeys: true,
onChange: handleSelectionChange,
}"
></a-table>
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submit"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</template>
<style scoped lang="scss"></style>

View File

@ -1,8 +1,9 @@
<script setup> <script setup>
import {listPerson} from "@/api/sales/person"; import { addPerson, listPerson } from "@/api/sales/person";
import {reactive, ref, toRefs} from "vue"; import { reactive, ref, toRefs } from "vue";
import {Table as ATable} from "ant-design-vue"; import { Table as ATable } from "ant-design-vue";
import Pagination from "@/components/Pagination/index.vue"; import Pagination from "@/components/Pagination/index.vue";
import modal from "@/plugins/modal";
const columns = [ const columns = [
{ {
@ -13,81 +14,120 @@ const columns = [
]; ];
const total = ref(0); const total = ref(0);
const data = reactive({ const data = reactive({
form: {}, form: {
personId: undefined,
name: undefined,
},
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
teamId: null, teamId: null,
name: null, name: null,
}, },
rules: {},
}); });
const {form, queryParams} = toRefs(data); const { form, queryParams, rules } = toRefs(data);
const loading = ref(false); const loading = ref(false);
const showSearch = ref(false) const showSearch = ref(false);
const personList = ref([]); const personList = ref([]);
const title = ref("") const title = ref("");
const showDialog = ref(false) const showDialog = ref(false);
const getList = () => { const getList = () => {
loading.value = true; loading.value = true;
listPerson(queryParams.value) listPerson(queryParams.value)
.then((resp) => { .then((resp) => {
personList.value = resp.rows; personList.value = resp.rows;
total.value = resp.total; total.value = resp.total;
}) })
.finally(() => { .finally(() => {
loading.value = false; loading.value = false;
}); });
}; };
const handleQuery = () => { const handleQuery = () => {};
const resetQuery = () => {};
} const formRef = ref();
const resetQuery = () => {
}
const reset = () => { const reset = () => {
} form.value = {};
formRef.value?.resetFields();
};
const handleAdd = () => { const handleAdd = () => {
reset();
title.value = "添加销售人员";
showDialog.value = true;
};
const submitForm = async () => {
await formRef.value.validate();
if (form.personId) {
} else {
addPerson(form.value).then(() => {
modal.msgSuccess("新增成功");
reset();
showDialog.value = false;
getList();
});
}
};
const cancel = () => {
reset();
showDialog.value = false;
};
}
getList(); getList();
</script> </script>
<template> <template>
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryRef" ref="queryRef"
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
label-width="120px" label-width="120px"
> >
<el-form-item label="姓名" prop="name"> <el-form-item label="姓名" prop="name">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.name"
placeholder="请输入销售人员姓名" placeholder="请输入销售人员姓名"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" <el-button type="primary" icon="Search" @click="handleQuery"
>搜索 >搜索
</el-button> </el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row class="mb8"> <el-row class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" @click="handleAdd" plain>新增销售人员</el-button> <el-button type="primary" @click="handleAdd" plain
>新增销售人员</el-button
>
</el-col> </el-col>
</el-row> </el-row>
<a-table <a-table
:columns="columns" :columns="columns"
:data-source="personList" :data-source="personList"
:pagination="false" :pagination="false"
></a-table> ></a-table>
<pagination :total="total"/> <pagination :total="total" />
<el-dialog v-model="showDialog" :title="title"></el-dialog> <el-dialog v-model="showDialog" :title="title" width="500">
<el-form ref="formRef" :model="form" :rules="rules" label-width="80">
<el-form-item label="姓名">
<el-input v-model="form.name"></el-input>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
</template> </template>
<style scoped lang="scss"></style> <style scoped lang="scss"></style>

View File

@ -1,130 +1,150 @@
<template> <template>
<el-form <el-form
:model="queryParams" :model="queryParams"
ref="queryRef" ref="queryRef"
:inline="true" :inline="true"
v-show="showSearch" v-show="showSearch"
label-width="120px" label-width="120px"
> >
<el-form-item label="销售团队名称" prop="name"> <el-form-item label="销售团队名称" prop="name">
<el-input <el-input
v-model="queryParams.name" v-model="queryParams.name"
placeholder="请输入销售团队名称" placeholder="请输入销售团队名称"
clearable clearable
@keyup.enter="handleQuery" @keyup.enter="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery" <el-button type="primary" icon="Search" @click="handleQuery"
>搜索 >搜索
</el-button> </el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" <el-button type="primary" plain icon="Plus" @click="handleAdd"
>新增 >新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="success" type="success"
plain plain
icon="Edit" icon="Edit"
:disabled="single" :disabled="single"
@click="handleUpdate" @click="handleUpdate"
>修改 >修改
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button <el-button
type="danger" type="danger"
plain plain
icon="Delete" icon="Delete"
:disabled="multiple" :disabled="multiple"
@click="handleDelete" @click="handleDelete"
v-hasPermi="['sales:team:remove']" v-hasPermi="['sales:team:remove']"
>删除 >删除
</el-button> </el-button>
</el-col> </el-col>
<right-toolbar <right-toolbar
v-model:showSearch="showSearch" v-model:showSearch="showSearch"
@queryTable="getList" @queryTable="getList"
></right-toolbar> ></right-toolbar>
</el-row> </el-row>
<a-table <a-table
:pagination="false" :pagination="false"
:columns="[ :columns="[
{ {
title: '名称', title: '名称',
dataIndex: 'name', dataIndex: 'name',
key: 'name', key: 'name',
}, },
{ {
title: '主管', title: '主管',
dataIndex: 'manager', dataIndex: 'manager',
key: 'manager', key: 'manager',
}, },
{ {
title: '操作', title: '操作',
dataIndex: 'operation', dataIndex: 'operation',
width: '320px', width: '320px',
}, },
]" ]"
@expand="handleExpandTable" @expand="handleExpandTable"
:data-source="teamList" :data-source="teamList"
> >
<!-- <template #expandedRowRender="{ record }">--> <!-- <template #expandedRowRender="{ record }">-->
<!-- <a-table :columns="[--> <!-- <a-table :columns="[-->
<!-- {--> <!-- {-->
<!-- title: '姓名',--> <!-- title: '姓名',-->
<!-- dataIndex: 'name',--> <!-- dataIndex: 'name',-->
<!-- key: 'name',--> <!-- key: 'name',-->
<!-- },--> <!-- },-->
<!-- ]"--> <!-- ]"-->
<!-- :data-source="record.children"--> <!-- :data-source="record.children"-->
<!-- ></a-table>--> <!-- ></a-table>-->
<!-- </template>--> <!-- </template>-->
<template #bodyCell="{ column, text, record }"> <template #bodyCell="{ column, text, record }">
<template v-if="column.dataIndex === 'role'"> <template v-if="column.dataIndex === 'role'">
<dict-tag :options="sales_person_dict" :value="record.role" /> <dict-tag :options="sales_person_dict" :value="record.role"/>
</template>
<template
v-else-if="column.dataIndex === 'operation' && !record.personId"
>
<el-button link type="primary" icon="plus">添加销售</el-button>
<el-button link type="primary" icon="plus" @click="setManager"
>设置主管</el-button
>
</template>
</template> </template>
</a-table> <template
v-else-if="column.dataIndex === 'operation' && !record.personId"
>
<el-button
link
type="primary"
icon="plus"
@click="handleAddSeller(record.teamId)"
>添加销售
</el-button>
<el-button link type="primary" icon="plus" @click="setManager"
>设置主管
</el-button>
</template>
</template>
</a-table>
<pagination <pagination
v-show="total > 0" v-show="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNum" v-model:page="queryParams.pageNum"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改销售团队对话框 --> <!-- 添加或修改销售团队对话框 -->
<el-dialog :title="title" v-model="open" width="500px" append-to-body> <el-dialog :title="title" v-model="open" width="500px" append-to-body>
<el-form ref="teamRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="teamRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="团队名称" prop="name"> <el-form-item label="团队名称" prop="name">
<el-input v-model="form.name" placeholder="请输入团队名称" /> <el-input v-model="form.name" placeholder="请输入团队名称"/>
</el-form-item> </el-form-item>
</el-form> </el-form>
<template #footer> <template #footer>
<div class="dialog-footer"> <div class="dialog-footer">
<el-button type="primary" @click="submitForm"> </el-button> <el-button type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button> <el-button @click="cancel"> </el-button>
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<table-select
:columns="[
{
title: '名称',
dataIndex: 'name',
key: 'name',
},
]"
row-key="personId"
:fetcher="listPerson"
:filter="filter"
v-model:show="showPersonSelector"
/>
</template> </template>
<script setup name="Team"> <script setup name="Team">
@ -135,14 +155,14 @@ import {
addTeam, addTeam,
updateTeam, updateTeam,
} from "@/api/sales/team"; } from "@/api/sales/team";
import { getCurrentInstance, reactive, ref, toRefs } from "vue"; import {getCurrentInstance, reactive, ref, toRefs} from "vue";
import { Table as ATable } from "ant-design-vue"; import {Table as ATable} from "ant-design-vue";
import { modelList } from "@/api/product/product"; import TableSelect from "@/components/TableSelect";
import { listPerson } from "@/api/sales/person"; import {listPerson} from "@/api/sales/person";
import DictTag from "@/components/DictTag/index.vue"; import DictTag from "@/components/DictTag/index.vue";
import { sales_person_dict } from "@/constant/dict"; import {sales_person_dict} from "@/constant/dict";
const { proxy } = getCurrentInstance(); const {proxy} = getCurrentInstance();
const teamList = ref([]); const teamList = ref([]);
const open = ref(false); const open = ref(false);
@ -154,7 +174,7 @@ const multiple = ref(true);
const total = ref(0); const total = ref(0);
const personTotal = ref(0); const personTotal = ref(0);
const title = ref(""); const title = ref("");
const showPersonSelector = ref(false);
const data = reactive({ const data = reactive({
form: {}, form: {},
queryParams: { queryParams: {
@ -171,16 +191,19 @@ const data = reactive({
}, },
rules: { rules: {
teamId: [ teamId: [
{ required: true, message: "销售团队id不能为空", trigger: "blur" }, {required: true, message: "销售团队id不能为空", trigger: "blur"},
], ],
name: [ name: [
{ required: true, message: "销售团队名称不能为空", trigger: "blur" }, {required: true, message: "销售团队名称不能为空", trigger: "blur"},
], ],
}, },
}); });
const { queryParams, personQueryParams, form, rules } = toRefs(data); const {queryParams, form, rules} = toRefs(data);
const queryType = ref(0); const filter = reactive({
canBeSellerOf: null,
canBeManagerOf: null,
})
/** 查询销售团队列表 */ /** 查询销售团队列表 */
function getList() { function getList() {
@ -197,24 +220,13 @@ function getList() {
} }
const personList = ref([]); const personList = ref([]);
const getPersonList = () => {
loading.value = true;
listPerson(personQueryParams.value)
.then((resp) => {
personList.value = resp.rows;
personTotal.value = resp.total;
})
.finally(() => {
loading.value = false;
});
};
const loadChildren = (row) => { const loadChildren = (row) => {
if (row.teamId) { if (row.teamId) {
/*加载型号*/
listPerson({ listPerson({
teamId: row.teamId, sellerOf: row.teamId,
}).then(({ rows }) => { }).then(({rows}) => {
row.children = rows.map((el) => ({ row.children = rows.map((el) => ({
...el, ...el,
key: el.personId, key: el.personId,
@ -306,21 +318,28 @@ function submitForm() {
function handleDelete(row) { function handleDelete(row) {
const _teamIds = row.teamId || ids.value; const _teamIds = row.teamId || ids.value;
proxy.$modal proxy.$modal
.confirm('是否确认删除销售团队编号为"' + _teamIds + '"的数据项?') .confirm('是否确认删除销售团队编号为"' + _teamIds + '"的数据项?')
.then(function () { .then(function () {
return delTeam(_teamIds); return delTeam(_teamIds);
}) })
.then(() => { .then(() => {
getList(); getList();
proxy.$modal.msgSuccess("删除成功"); proxy.$modal.msgSuccess("删除成功");
}) })
.catch(() => {}); .catch(() => {
});
} }
const handleAddSeller = (teamId) => {
filter.canBeManagerOf = null
filter.canBeSellerOf = teamId
showPersonSelector.value = true
}
/** /**
* 设置主管 * 设置主管
*/ */
const setManager = () => {}; const setManager = () => {
};
getList(); getList();
</script> </script>