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