Tue Nov 21 11:11:00 CST 2023 inscode

src/App.vue

@@ -14,7 +14,7 @@ import empss from './component/humanResources/emp.vue';
   <announcementType></announcementType>
   <departments></departments> -->
   <empss></empss>
-  <job-title></job-title>
+  <!-- <job-title></job-title> -->
   <el-row>
     <el-col>后台管理平台</el-col>
   </el-row>

src/component/humanResources/emp.vue

 <script setup>
-import { onMounted, ref } from 'vue'
+import { onMounted, ref, provide, reactive } from 'vue'
 import { deepClone } from '@/util/deepCode'
-import { TreeToFlat } from '@/util/toTree'
+import { TreeToFlat, FlatToTree } from '@/util/toTree'
 import { computed } from '@vue/reactivity';
-import { getHumanResourcesDepartment } from '@/api/api';
-onMounted(()=>{
-    treeData.value = TreeToFlat(deepClone(getHumanResourcesDepartment().data.data)).tree;
+import { getHumanResourcesDepartment, getContractCategory } from '@/api/api';
+
+import mains from '@/component/main/main.vue';
+import ejectDialog from '@/component/main/ejectDialog.vue';
+import headers from '@/component/main/header/header.vue';
+import addButton from '@/component/main/header/add_download/button.vue';
+import addDownload from '@/component/main/header/add_download/addDownload.vue';
+import forms from '@/component/main/header/form.vue';
+import empSelectForm from './empSelectForm.vue'
+
+//树形列表
+onMounted(() => {
+    getHumanResourcesDepartment().then((res) => {
+        treeData.value = FlatToTree(deepClone(res.data.data.data.map((item) => {
+            item.label = item.departmentName;
+            item.title = item.label;
+            return item;
+        }))).tree;
+    })
 })
 const treeData = ref([
-    {
-        id: 1,
-        label: 'Level one 1',
-        children: [
-            {
-                id: 4,
-                label: 'Level two 1-1',
-                children: [
-                    {
-                        id: 9,
-                        label: 'Level three 1-1-1',
-                    },
-                    {
-                        id: 10,
-                        label: 'Level three 1-1-2',
-                    },
-                ],
-            },
-        ],
-    },
-    {
-        id: 2,
-        label: 'Level one 2',
-        children: [
-            {
-                id: 5,
-                label: 'Level two 2-1',
-            },
-            {
-                id: 6,
-                label: 'Level two 2-2',
-            },
-        ],
-    },
-    {
-        id: 3,
-        label: 'Level one 3',
-        children: [
-            {
-                id: 7,
-                label: 'Level two 3-1',
-            },
-            {
-                id: 8,
-                label: 'Level two 3-2',
-            },
-        ],
-    },
 ]);
 const defaultProps = {
     children: 'children',
     label: 'label',
 }
-const defExpandedKey = computed(()=>{
-    return TreeToFlat(deepClone(treeData.value)).map((item) => item.id);
+const defExpandedKey = computed(() => {
+    if (treeData.value == []) {
+        return [];
+    }
+    const return_s = TreeToFlat(deepClone(treeData.value)).map((item) => item.title);
+    return return_s;
+
 })
+
+// pagination
+const tablePagination = reactive({
+    currentPage: 1,
+    pageSize: 10,
+    total: 1
+});
+const getData = () => {
+    getContractCategory({ page: tablePagination.currentPage, limit: tablePagination.pageSize })
+        .then((res) => {
+            if (res.data.data.code === 10000) {
+                tableData.value = res.data.data.data;
+                tablePagination.total = res.data.data.count;
+            }
+        })
+}
+onMounted(() => {
+    getData();
+})
+const handleCurrentChange = (index) => {
+    tablePagination.currentPage = index;
+    getData();
+}
+const handleSizeChange = (index) => {
+    console.log(index);
+    tablePagination.currentPage = 1;
+    tablePagination.pageSize = index;
+    getData();
+}
+
+// table
+const tableData = ref();
+const tableType = ref();
+tableType.value = [
+    { name: "id号", type: "id", width: "150px", isSort: false, align: "center" },
+    { name: "类别名称", type: "typeName", width: "auto", isSort: false, align: "left" },
+    { name: "状态", type: "state", width: "150px", isSort: false, align: "center", isReadOnly: false }
+]
+const operation = ref();
+operation.value = {
+    type: ["edit", "delete"],
+    width: "120px",
+    coordin: new Map()
+}
+operation.value.coordin.set(1075, new Set(['edit', 'delete']));
+const cellSetStyle = ({ row, column, rowIndex, columnIndex }) => {
+    if (column.property === "state") {
+        if (row.state == "正常") {
+            return {
+                color: "#16b777"
+            };
+        } else if (row.state == "禁用") {
+            return {
+                color: "#F56C6C"
+            }
+        }
+    }
+    return;
+}
+
+//查询表单
+const contractSelect = ref({
+    typeName: '',
+    contractNumber: '',
+    contractName: '',
+    contractCategory: '',
+    natureOfContract: '',
+    id: '',
+    page: '1',
+    limit: '10'
+});
+
+
+//dialog
+const bangDingtest = ref();
+const inputDialog = ref();
+const inputEditDialog = computed({
+    get: () => {
+        return row.value.typeName;
+    },
+    set: (val) => {
+        row.value.typeName = val;
+        getData();
+    }
+});
+onMounted(() => {
+})
+const sendRequest = () => {
+    console.log('发送请求');
+    message(10000);
+}
+
+//对话框
+const addDialog = ref(false);
+const addSubcategoriesDialog = ref(false);
+const disabledDialog = ref(false);
+const detailsDialog = ref(false);
+const editDialog = ref(false);
+const deleteDialog = ref(false);
+const row = ref();
+provide("addSubcategoriesDialog", addSubcategoriesDialog);
+provide("disabledDialog", disabledDialog);
+provide("detailsDialog", detailsDialog);
+provide("editDialog", editDialog);
+provide("deleteDialog", deleteDialog);
+
+provide("tableData", tableData);
+provide("row", row);
+provide("tablePagination", tablePagination);
+provide("contractSelect", contractSelect);
+provide("changeState", () => {
+    console.log(1111);
+})
+provide("cellSetStyle", ({ row, column, rowIndex, columnIndex }) => {
+    if (column.property === "state") {
+        if (row.state == "正常") {
+            return {
+                color: "#16b777"
+            };
+        } else if (row.state == "禁用") {
+            return {
+                color: "#F56C6C"
+            }
+        }
+    }
+    return;
+});
 </script>
 
 <template>
     <div class="common-layout">
         <el-container>
             <el-aside>
-                <el-tree :data="treeData" show-checkbox node-key="id"
-                    :default-expanded-keys="defExpandedKey"
-                    :default-checked-keys="[5]" :props="defaultProps" />
+                <h2>企业组织架构</h2>
+                <el-tree :data="treeData" show-checkbox node-key="title" :default-expanded-keys="defExpandedKey"
+                    :default-checked-keys="defExpandedKey" :props="defaultProps" />
             </el-aside>
             <el-main>
-
+                <mains :tableType="tableType" :operation="operation">
+                    <headers>
+                        <forms>
+                            <empSelectForm></empSelectForm>
+                        </forms>
+                        <addDownload>
+                            <addButton @openDialog="addDialog = true">添加合同</addButton>
+                        </addDownload>
+                    </headers>
+                    <ejectDialog v-model:openDialog="addDialog" :confirm="sendRequest">
+                        <template #header>新增类别</template>
+                        <el-input v-model="inputDialog" />
+                    </ejectDialog>
+                    <ejectDialog v-model:openDialog="editDialog" :confirm="sendRequest">
+                        <template #header>编辑类别</template>
+                        <el-input v-model="inputEditDialog" />
+                    </ejectDialog>
+                    <ejectDialog v-model:openDialog="deleteDialog">
+                        <template #header>fdsafs</template>
+                    </ejectDialog>
+                    <template #foot>
+                        <el-pagination v-model:current-page="tablePagination.currentPage"
+                            v-model:page-size="tablePagination.pageSize" :page-sizes="[10, 20, 30]" small="small"
+                            layout=" prev, pager, next,jumper, total,sizes," :total="tablePagination.total"
+                            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+                    </template>
+                </mains>
             </el-main>
         </el-container>
     </div>
 </template>
 
-<style scoped></style>
+<style scoped>
\ No newline at end of file
+.el-aside{
+}
+</style>
\ No newline at end of file

src/component/humanResources/empSelectForm.vue

+<script setup>
+import { Search } from '@element-plus/icons-vue'
+import { getContractListType, getContractList } from '@/api/api'
+import { onMounted, ref, computed, inject } from 'vue';
+const contractType = ref({
+    category: [],
+    nature: [],
+    state: []
+});
+
+const inputSelect = computed({
+    get() {
+        return contractSelect.value.contractNumber;
+    },
+    set(val) {
+        contractSelect.value.contractNumber = val;
+        contractSelect.value.contractName = val;
+        contractSelect.value.id = val;
+    }
+})
+const tableData = inject("tableData");
+const tablePagination = inject("tablePagination");
+const contractSelect = inject("contractSelect");
+const selectClick = () => {
+    getContractList(contractSelect.value).then((res) => {
+        if (res.data.data.code === 10000) {
+            tableData.value = res.data.data.data;
+            tablePagination.total = Number(res.data.data.count);
+        }
+    });
+}
+
+onMounted(() => {
+    getContractListType().then((res) => contractType.value = res.data.data.data)
+})
+</script>
+
+<template>
+    <el-form-item>
+        <el-select placeholder="请选择合同类别" @keyup.enter="selectClick" v-model="contractSelect.contractCategory" clearable >
+            <el-option v-for="item in contractType.category" :key="item" :label="item" :value="item" />
+        </el-select>
+    </el-form-item>
+    <el-form-item>
+        <el-select placeholder="请选择合同性质" @keyup.enter="selectClick" v-model="contractSelect.natureOfContract" clearable >
+            <el-option v-for="item in contractType.nature" :key="item" :label="item" :value="item" />
+        </el-select>
+    </el-form-item>
+    <el-form-item>
+        <el-select placeholder="请选择合同状态" @keyup.enter="selectClick" v-model="contractSelect.typeName" clearable >
+            <el-option v-for="item in contractType.state" :key="item" :label="item" :value="item" />
+        </el-select>
+    </el-form-item>
+    <el-form-item>
+        <el-input placeholder="请输入关键字" v-model="inputSelect" @keyup.enter="selectClick">
+            <template #append>
+                <el-button :icon="Search" @click="selectClick"/>
+            </template>
+        </el-input>
+    </el-form-item>
+</template>
+
+<style scoped>
+.el-select {
+    margin-right: 10px;
+}
+
+.el-form-item {
+    margin-right: 0;
+}
+.el-form-item{
+    margin-bottom: 0;
+}
+</style>
\ No newline at end of file

src/storage/tableStroage.js

+import { defineStore } from "pinia";
+
+export const useTableStore = defineStore('table', {
+    state() {
+        return {
+            addDialog: null,
+            addSubcategoriesDialog: null,
+            addMainDialog: null,
+            disabledDialog: null,
+            detailsDialog: null,
+            editDialog: null,
+            deleteDialog: null,
+            row: null,
+        };
+    },
+    actions: {
+        initAddDialog() {
+            this.addDialog = false;
+        },
+        getAddDialog(){
+            return this.addDialog;
+        },
+        setAddDialog(val){
+            this.addDialog = val;
+        },
+        initAddSubcategoriesDialog() {
+            this.addSubcategoriesDialog = false;
+        },
+        getAddSubcategoriesDialog() {
+            return this.addSubcategoriesDialog;
+        },
+        setAddSubcategoriesDialog(val){
+             this.addSubcategoriesDialog = val;
+        },
+        initAddMainDialog() {
+            this.addMainDialog = false;
+        },
+        getAddMainDialog() {
+            return this.addMainDialog;
+        },
+        setAddMainDialog(val) {
+            this.addMainDialog = val;
+        },
+        initDisabledDialog() {
+            this.disabledDialog = false;
+        },
+        setDisabledDialog(val) {
+            this.disabledDialog = val;
+        },
+        getDisabledDialog() {
+            return this.disabledDialog;
+        },
+        initDetailsDialog() {
+            this.detailsDialog = false;
+        },
+        getDetailsDialog() {
+            return  this.detailsDialog;
+        },
+        setDetailsDialog(val) {
+            this.detailsDialog = val;
+        },
+        initEditDialog() {
+            this.editDialog = false;
+        },
+        getEditDialog() {
+            return this.editDialog ;
+        },
+        setEditDialog(val) {
+            this.editDialog = val;
+        },
+        initDeleteDialog() {
+            this.deleteDialog = false;
+        },
+        setDeleteDialog(val) {
+            this.deleteDialog = val;
+        },
+        getDeleteDialog() {
+            return this.deleteDialog ;
+        },
+        initRow() {
+            this.row = {};
+        },
+        getRow() {
+            return this.row;
+        },
+        setRow(val) {
+            this.row = val;
+        },
+    }
+});
\ No newline at end of file