新增企业选择

src/BusinessCom/ChooseCompany/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <teleport to="body">
+    <Transition name="wind">
+      <section
+        class="choose-container"
+        v-if="showChoose"
+        @click.self="showChoose = false"
+      >
+        <section class="choose-wrapper">
+          <el-form inline :model="form">
+            <el-form-item label="企业名称">
+              <el-input placeholder="请输入企业名称" style="width: 150px" />
+            </el-form-item>
+            <el-form-item label="区域">
+              <el-select
+                v-model="form.role"
+                placeholder="请选择区域"
+                style="width: 150px"
+              >
+                <el-option> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="行业">
+              <el-select
+                v-model="form.role"
+                placeholder="请选择行业"
+                style="width: 150px"
+              >
+                <el-option> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="部门">
+              <el-select
+                v-model="form.role"
+                placeholder="请选择部门"
+                style="width: 150px"
+              >
+                <el-option> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="规模">
+              <el-select
+                v-model="form.role"
+                placeholder="请选择角色"
+                style="width: 150px"
+              >
+                <el-option> </el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item>
+              <el-button type="primary">查询</el-button>
+              <el-button>重置</el-button>
+            </el-form-item>
+          </el-form>
+	        <el-row>
+			        <el-checkbox>选择当前条件所有公司</el-checkbox>
+			        <el-checkbox>排除当前条件所有公司</el-checkbox>
+	        </el-row>
+          <el-table v-loading="loading" :data="tableData" @selection-change="tableSelect" max-height="52vh">
+            <el-table-column type="selection" />
+            <el-table-column
+              label="企业名称"
+              align="center"
+              key="enterprisesName"
+              prop="enterprisesName"
+            />
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          />
+        </section>
+      </section>
+    </Transition>
+  </teleport>
+</template>
+
+<script setup>
+import { listEnterprises } from "@/api/system/enterprises/enterprises.js";
+const loading = ref(false);
+const tableData = ref([]);
+const showChoose = ref(false);
+const total = ref(0);
+const isSelect=ref([])
+const form = ref({
+  username: undefined,
+  role: undefined,
+  pageSize: 10,
+  pageNum: 1,
+});
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+  },
+});
+
+const { queryParams } = toRefs(data);
+
+function open() {
+  getList();
+  showChoose.value = true;
+}
+
+function getList() {
+  loading.value = true;
+  listEnterprises(queryParams.value).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+    loading.value = false;
+  });
+}
+function tableSelect(ids){
+	isSelect.value=ids.map(row=>{
+		return row.id
+	})
+	console.log(isSelect.value)
+}
+
+defineExpose({ open });
+</script>
+
+<style scoped lang="scss">
+.choose-container {
+  cursor: pointer;
+  position: absolute;
+  inset: 0;
+  background-color: var(--el-overlay-color-lighter);
+  z-index:1002;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .choose-wrapper {
+    width: 60vw;
+    height: 80vh;
+    background-color: #fff;
+    border-radius: var(--el-border-radius-base, 4px);
+    padding: 15px;
+  }
+}
+
+:deep(.el-form-item) {
+  margin-right: 15px;
+  margin-bottom: 15px;
+}
+
+.wind-enter-active,
+.wind-leave-active {
+  transition: opacity 0.5s ease-in-out;
+}
+
+.wind-enter-from,
+.wind-leave-to {
+  opacity: 0;
+}
+</style>

src/api/system/enterprises/enterprises.js

@@ -42,3 +42,11 @@ export function delEnterprises(id) {
     method: 'delete'
   })
 }
+
+// 获取企业简要列表
+export function getSimpleList(){
+  return request({
+    url:'/system/enterprises/simpleList',
+    method:'get'
+  })
+}

src/views/task/index.vue

@@ -103,7 +103,7 @@
 
       <el-table-column label="执行范围" prop="roleSort" align="center">
         <template #default>
-          <el-link type="primary">共200家</el-link>
+          <el-link type="primary" @click="selectCompany">共200家</el-link>
         </template>
       </el-table-column>
       <el-table-column
@@ -134,14 +134,18 @@
     />
 
     <TaskForm ref="taskFormRef" />
+
+	  <ChooseCompany  ref="chooseCompanyRef"/>
   </section>
 </template>
 
 <script setup>
 import TaskForm from "./form.vue";
+import ChooseCompany from '@/BusinessCom/ChooseCompany/index.vue'
 
 const { proxy } = getCurrentInstance();
 const { task_period_type } = proxy.useDict("task_period_type");
+const chooseCompanyRef=ref()
 const loading = ref(false);
 const showSearch = ref(true);
 const taskFormRef = ref();
@@ -201,6 +205,10 @@ function handleQuery() {
 function create() {
   unref(taskFormRef).open({ title: "新增任务" });
 }
+
+function  selectCompany(){
+	unref(chooseCompanyRef).open({ title: "选择执行范围" });
+}
 </script>
 
 <style scoped lang="scss"></style>