update

src/components/TableSelect/index.vue

@@ -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>

src/views/sales/team/person.vue

@@ -1,8 +1,9 @@
 <script setup>
-import {listPerson} from "@/api/sales/person";
+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,20 +14,24 @@ 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 title = ref("");
-const showDialog = ref(false)
+const showDialog = ref(false);
 const getList = () => {
   loading.value = true;
   listPerson(queryParams.value)
@@ -39,16 +44,37 @@ const getList = () => {
     });
 };
 
-const handleQuery = () => {
+const handleQuery = () => {};
+const resetQuery = () => {};
 
-}
+const formRef = ref();
-const resetQuery = () => {
-}
 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>
 
@@ -77,7 +103,9 @@ getList();
   </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
@@ -87,7 +115,19 @@ getList();
   ></a-table>
   <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>

src/views/sales/team/team.vue

@@ -95,10 +95,16 @@
       <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="handleAddSeller(record.teamId)"
+        >添加销售
+        </el-button>
         <el-button link type="primary" icon="plus" @click="setManager"
-            >设置主管</el-button
+        >设置主管
-          >
+        </el-button>
       </template>
     </template>
   </a-table>
@@ -125,6 +131,20 @@
       </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">
@@ -137,7 +157,7 @@ import {
 } 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 TableSelect from "@/components/TableSelect";
 import {listPerson} from "@/api/sales/person";
 import DictTag from "@/components/DictTag/index.vue";
 import {sales_person_dict} from "@/constant/dict";
@@ -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: {
@@ -179,8 +199,11 @@ const data = reactive({
   },
 });
 
-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() {
@@ -197,23 +220,12 @@ 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,
+      sellerOf: row.teamId,
     }).then(({rows}) => {
       row.children = rows.map((el) => ({
         ...el,
@@ -314,13 +326,20 @@ function handleDelete(row) {
         getList();
         proxy.$modal.msgSuccess("删除成功");
       })
-    .catch(() => {});
+      .catch(() => {
+      });
 }
 
+const handleAddSeller = (teamId) => {
+  filter.canBeManagerOf = null
+  filter.canBeSellerOf = teamId
+  showPersonSelector.value = true
+}
 /**
  * 设置主管
  */
-const setManager = () => {};
+const setManager = () => {
+};
 
 getList();
 </script>