feat: 技能匹配、工程师状态页面修改

src/api/select.js

@@ -3,6 +3,9 @@ import request from '@/utils/request'
 // 获取部门列表
 export const reqGetDepartments = () => request({ url: `/WRD-admin/sys/dept/list`, method: 'get' })
 
+// 获取部门列表
+export const reqGetRegionAndCity = () => request({ url: `/WRD-admin/sys/user/ReignAndCity`, method: 'get' })
+
 // 不带部门
 // export const reqSelectEngiStatus = (year, month, page, limit) => request({ url: `/WRD-admin/sys/workorder/page`, method: 'get', params: { year, month, page, limit } });
 

src/router/index.js

@@ -56,22 +56,22 @@ export const constantRoutes = [
     tag: '导航页面',
     component: () => import('@/views/nav/nav2.vue'),
     hidden: true
-  },
-  {
-    path: '/history',
-    component: Layout,
-    name: 'History',
-    redirect: '/history/orderHist',
-    tag: '预约历史查询',
-    backgroundImage: require('@/assets/siemens/task.jpg'),
-    description: '查看已预约历史',
-    children: [{
-      path: 'orderHist',
-      name: 'OrderHist',
-      component: () => import('@/views/orderHist'),
-      meta: { title: '预约单查询', icon: 'el-icon-s-custom' }
-    }]
   }
+  // {
+  //   path: '/history',
+  //   component: Layout,
+  //   name: 'History',
+  //   redirect: '/history/orderHist',
+  //   tag: '预约历史查询',
+  //   backgroundImage: require('@/assets/siemens/task.jpg'),
+  //   description: '查看已预约历史',
+  //   children: [{
+  //     path: 'orderHist',
+  //     name: 'OrderHist',
+  //     component: () => import('@/views/orderHist'),
+  //     meta: { title: '预约单查询', icon: 'el-icon-s-custom' }
+  //   }]
+  // }
 ]
 
 export const asyncRoutes = [

src/views/record/index.vue

@@ -10,11 +10,61 @@
 
       <!-- change month button -->
       <div class="change-month-button-group">
-        <el-form :inline="true">
+        <el-form :inline="true" label-width="auto" class="header-buttons" label-position="top">
-          <el-form-item label="部 门" class="department-select-span">
+          <div v-for="(category, index) in categories" :key="index">
+            <el-form-item>
+              <el-select
+                :id="'select-' + index"
+                v-model="selected[index]"
+                :placeholder="category.categoryName"
+                multiple
+                :collapse-tags="collapse"
+                clearable
+              >
+                <el-option
+                  v-for="option in category.options"
+                  :key="option.id"
+                  :label="option.name"
+                  :value="option.id"
+                />
+              </el-select>
+            </el-form-item>
+          </div>
+          <el-form-item>
+            <el-select
+              v-model="region"
+              placeholder="所在区域"
+              clearable
+              @change="handleRegion"
+            >
+              <el-option
+                v-for="item in regionList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-select
+              v-model="city"
+              placeholder="所在城市"
+              clearable
+            >
+              <el-option
+                v-for="(item, index) in cityList"
+                :key="index"
+                :label="item"
+                :value="item"
+              />
+            </el-select>
+          </el-form-item>
+          <!--增加BD角色的判断，目前BD角色写死-->
+          <el-form-item v-if="this.$store.state.user.roleId !== '5'" class="department-select-span">
             <el-select
               v-model="departmentId"
-              placeholder="请选择"
+              placeholder="所在部门"
+              clearable
               @change="getTableDataByDept(year, month)"
             >
               <el-option
@@ -25,7 +75,7 @@
               />
             </el-select>
           </el-form-item>
-          <el-form-item label="技能查询" class="department-select-span">
+          <!-- <el-form-item label="技能查询" class="department-select-span">
             <div class="block">
               <el-cascader
                 v-model="skillSearchList"
@@ -41,17 +91,27 @@
                 popper-class="dropDownPanel"
               />
             </div>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item>
             <el-button type="info" plain @click="handleSearch">查询</el-button>
           </el-form-item>
+          <el-form-item>
             <el-button
               type="primary"
               icon="el-icon-refresh-right"
               class="siemens-button"
+              size="small"
               @click="resetDepartmentSearch"
             >查看全部</el-button>
+          </el-form-item>
         </el-form>
+
+      </div>
+      <div class="table-header" style="">
+        <div class="year-month-span">
+          <span>{{ year }}年</span>
+          <span>{{ month }}月</span>
+        </div>
         <el-button-group>
           <el-button
             type="primary"
@@ -71,10 +131,6 @@
           >下一月<i class="el-icon-arrow-right el-icon--right" /></el-button>
         </el-button-group>
       </div>
-      <div class="year-month-span">
-        <span>{{ year }}年</span>
-        <span>{{ month }}月</span>
-      </div>
       <!-- table -->
       <div>
         <el-table
@@ -724,6 +780,11 @@ export default {
       total: 0,
       list: [],
       engiArray: [],
+      regionAndCityList: [],
+      regionList: [],
+      cityList: [],
+      region: '',
+      city: '',
       departmentId: ' ',
       departmentList: [],
       loading: false,
@@ -915,7 +976,11 @@ export default {
       props: { multiple: true },
       options: [],
       collapseTags: true,
-      maxCount: 10
+      maxCount: 10,
+      // 动态生成下拉框
+      categories: [], // 这里将接收后台返回的类别数据
+      selected: [], // 用于存储每个下拉框的选择值
+      collapse: true
     }
   },
   async mounted() {
@@ -924,6 +989,12 @@ export default {
     // 获取技能列表
     const data = await this.$API.skilltype.reqGetSkillTypeWithLabels()
     this.options = this.convertDataToCascader(data.data)
+    // 加载下拉框数据
+    this.categories = this.convertToDropdownFormat(data.data).reverse()
+    // 获取 区域 城市 列表
+    const result = await this.$API.select.reqGetRegionAndCity()
+    this.regionAndCityList = result.data
+    this.regionList = result.data.map(item => { return { value: item.region, label: item.region } })
   },
   // 初始化部门选项为不限
   created() {
@@ -977,7 +1048,9 @@ export default {
       }
     },
     intArray() {
-      return Object.keys(this.skillSearchList).length === 0 ? [] : this.skillSearchList.map(subArray => parseInt(subArray[1], 10))
+      // 排除空数组元素
+      return Object.keys(this.selected).length === 0 ? [] : this.selected.filter(subArray => subArray.length > 0).map(subArray => parseInt(subArray[0], 10))
+      // return Object.keys(this.skillSearchList).length === 0 ? [] : this.skillSearchList.map(subArray => parseInt(subArray[1], 10))
     },
     computRulesOfAddWordRecord() {
       this.updateRulesBasedOnRole()
@@ -1059,22 +1132,39 @@ export default {
       const { page, limit } = this
       return index + 1 + (page - 1) * limit
     },
-
+    handleRegion(region) {
+      const data = this.regionAndCityList.filter(item => item.region === region)
+      this.cityList = data[0].cities.split(',')
+      this.city = ''
+      console.log(this.cityList)
+    },
     async getTableData(year = this.year, month = this.month) {
       this.loading = true
 
-      this.handleMonthLastDay()
+      // 确保handleMonthLastDay和dayScreen都完成
-
+      await Promise.all([
+        this.handleMonthLastDay(),
         this.dayScreen()
+      ])
+
       const { page, limit } = this
       // 获取全部Engineer/Duty员工列表
-      const resOfAllEngis = await this.$API.user.reqGetUserPageWithSkills(page, limit)// select.reqSelectAllEngis(page, limit)
+      var queryInfo = {
-      console.log(resOfAllEngis)
+        page: this.page,
-      if (resOfAllEngis.code === 0) {
+        limit: this.limit,
-        for (var i in resOfAllEngis.data.list) {
+        deptId: this.department
-          this.$set(resOfAllEngis.data.list[i], 'workRecordsList', [])
       }
-        this.engiArray = resOfAllEngis.data.list
+      const resOfAllEngis = await this.$API.user.reqGetUserPageWithSkills(queryInfo)// select.reqSelectAllEngis(page, limit)
+      // console.log(resOfAllEngis)
+      if (resOfAllEngis.code === 0) {
+        // for (var i in resOfAllEngis.data.list) {
+        //   this.$set(resOfAllEngis.data.list[i], 'workRecordsList', [])
+        // }
+        // this.engiArray = resOfAllEngis.data.list
+        this.engiArray = resOfAllEngis.data.list.map(engi => ({
+          ...engi,
+          workRecordsList: []
+        }))
         this.total = resOfAllEngis.data.total
       }
 
@@ -1086,23 +1176,31 @@ export default {
           limit
         )
       if (resOfSelectEngiStatusByMap.code === 0) {
-        var EngiStatusMap = resOfSelectEngiStatusByMap.data
+        // var EngiStatusMap = resOfSelectEngiStatusByMap.data
+        // for (const i in EngiStatusMap) {
+        //   for (var j in this.engiArray) {
+        //     if (i === this.engiArray[j].gid) {
+        //       for (var k in EngiStatusMap[i]) {
+        //         this.engiArray[j].workRecordsList.push(EngiStatusMap[i][k])
+        //       }
+        //     }
+        //   }
+        // }
+        const EngiStatusMap = resOfSelectEngiStatusByMap.data
         for (const i in EngiStatusMap) {
-          for (var j in this.engiArray) {
+          for (let j = 0; j < this.engiArray.length; j++) {
             if (i === this.engiArray[j].gid) {
-              for (var k in EngiStatusMap[i]) {
+              this.engiArray[j].workRecordsList = EngiStatusMap[i]
-                this.engiArray[j].workRecordsList.push(EngiStatusMap[i][k])
             }
           }
         }
       }
-      }
-      this.$nextTick(() => {
-        // this.departmentId = this.deptId;
-        // this.getTableDataByDept(year, month);
-      })
       this.$nextTick(() => {
         this.$refs.statusTable.doLayout()
+        // 渲染数据到表格
+        if (this.$refs.statusTable) {
+          this.$refs.statusTable.data = this.engiArray
+        }
       })
       this.loading = false
     },
@@ -1121,7 +1219,9 @@ export default {
         page: this.page,
         limit: this.limit,
         deptId: this.departmentId,
-        skillIdList: this.intArray.join(',')
+        skillIdList: this.intArray.join(','),
+        reign: this.region.trim(),
+        city: this.city.trim()
       }
       const resultOfSelectEngisByDept =
         await this.$API.user.reqGetUserPageWithSkills(queryInfo)// select.reqSelectEngisByDept(page, limit, departmentId)
@@ -1235,7 +1335,9 @@ export default {
         this.month = 12
         this.year--
       }
+      this.$nextTick(() => {
         this.getTableDataByDept()
+      })
     },
     // 下个月按钮回调
     nextmonth() {
@@ -1244,7 +1346,9 @@ export default {
         this.month = 1
         this.year++
       }
+      this.$nextTick(() => {
         this.getTableDataByDept()
+      })
     },
 
     // 处理二月最后一天
@@ -1971,6 +2075,25 @@ export default {
         }
       }
       return targetFormat
+    },
+    // 将原始数据转换为下拉框数据
+    convertToDropdownFormat(sourceData) {
+      const dropdownData = []
+
+      for (const category in sourceData) {
+        if (Object.prototype.hasOwnProperty.call(sourceData, category)) {
+          const categoryData = {
+            categoryName: category,
+            options: sourceData[category].map(item => ({
+              id: item.id,
+              name: item.name
+            }))
+          }
+          dropdownData.push(categoryData)
+        }
+      }
+
+      return dropdownData
     }
   },
   watch: {
@@ -2042,14 +2165,56 @@ export default {
 .change-month-button-group {
   display: flex;
   // text-align: right;
-  margin-bottom: 10px;
+  // margin-bottom: 10px;
   justify-content: space-between;
   position: relative;
+
+  .header-buttons {
+      display: flex;
+      padding: 20px 0 0 0;
+      margin: 0 0 10px 0;
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 浅灰色阴影 */
+
+      //下拉框
+      .el-select{
+        // padding-left: 10px;
+      }
+      ::v-deep .el-input__inner{
+        // border: none;
+      }
+    }
 }
 
-.year-month-span {
+.el-form {
+    display: flex;
+    flex-wrap: nowrap; /* 防止下拉框换行 */
+  }
+
+  .el-form-item {
+    // margin-right: 10px; /* 为每个下拉框添加一些间距 */
+    margin-left: 20px;
+  }
+
+  /* 如果需要，可以添加媒体查询来调整响应式布局 */
+  @media (max-width: 600px) {
+    .el-form-item {
+      flex-direction: column;
+    }
+  }
+.table-header{
+  display: flex;
+  justify-content: space-between;
+
+  .year-month-span {
     position: relative;
+    display: flex;
+    align-items: center;
     margin-bottom: 10px;
+  }
+
+  .el-button-group {
+    margin-bottom: 10px;
+  }
 }
 
 .status-desc-group {
@@ -2127,7 +2292,7 @@ export default {
   }
 
   ::v-deep .el-tag.el-tag--info {
-    margin-top: 10px;
+    // margin-top: 10px;
   }
 
   ::v-deep .el-cascader__search-input{

src/views/skill/datamatch/index.vue

@@ -1,9 +1,27 @@
 <template>
   <div class="role-container">
-
     <!-- 分类查询 -->
-    <el-form label-width="100px" :inline="true" class="header-buttons">
+    <el-form label-width="auto" :inline="true" class="header-buttons" label-position="top">
-      <el-form-item label="工程师部门" class="el-form-item__label">
+      <div v-for="(category, index) in categories" :key="index">
+        <el-form-item>
+          <el-select
+            :id="'select-' + index"
+            v-model="selected[index]"
+            :placeholder="category.categoryName"
+            multiple
+            :collapse-tags="collapse"
+            clearable
+          >
+            <el-option
+              v-for="option in category.options"
+              :key="option.id"
+              :label="option.name"
+              :value="option.id"
+            />
+          </el-select>
+        </el-form-item>
+      </div>
+      <!-- <el-form-item label="工程师部门" class="el-form-item__label">
         <el-select
           v-model="department"
           placeholder="请选择工程师部门"
@@ -16,7 +34,7 @@
             :value="dept.id"
           />
         </el-select>
-      </el-form-item>
+      </el-form-item> -->
       <!-- <el-form-item label="技能类型" class="department-select-span">
         <el-select
           v-model="skillType"
@@ -32,7 +50,7 @@
           />
         </el-select>
       </el-form-item> -->
-      <el-form-item label="技能查询" class="department-select-span">
+      <!-- <el-form-item label="技能查询" class="department-select-span">
         <div class="block">
           <el-cascader
             v-model="skillSearchList"
@@ -48,6 +66,49 @@
             popper-class="dropDownPanel"
           />
         </div>
+      </el-form-item> -->
+      <el-form-item>
+        <el-select
+          v-model="region"
+          placeholder="所在区域"
+          clearable
+          @change="handleRegion"
+        >
+          <el-option
+            v-for="item in regionList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          v-model="city"
+          placeholder="所在城市"
+          clearable
+        >
+          <el-option
+            v-for="(item, index) in cityList"
+            :key="index"
+            :label="item"
+            :value="item"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          v-model="department"
+          placeholder="所在部门"
+          clearable
+        >
+          <el-option
+            v-for="(dept, index) in departmentList"
+            :key="index"
+            :label="dept.deptName"
+            :value="dept.id"
+          />
+        </el-select>
       </el-form-item>
       <el-form-item>
         <el-button type="info" plain @click="handleSearch">查询</el-button>
@@ -141,6 +202,10 @@ export default {
   components: { treeTransfer }, // 注册
   data() {
     return {
+      // 动态生成下拉框
+      categories: [], // 这里将接收后台返回的类别数据
+      selected: [], // 用于存储每个下拉框的选择值
+      collapse: true,
       // 级联搜索
       skillSearchList: {},
       props: {
@@ -218,8 +283,13 @@ export default {
         realName: '',
         deptName: ''
       },
+      regionAndCityList: [],
+      regionList: [],
+      cityList: [],
       departmentList: [],
       department: '',
+      region: '',
+      city: '',
       page: 1,
       limit: 10,
       total: 0
@@ -229,7 +299,9 @@ export default {
     ...mapGetters(['gid', 'employeeNo', 'name', 'deptId', 'permissions']),
     // 级联框的数据：技能清单
     intArray() {
-      return Object.keys(this.skillSearchList).length === 0 ? [] : this.skillSearchList.map(subArray => parseInt(subArray[1], 10))
+      // 排除空数组元素
+      return Object.keys(this.selected).length === 0 ? [] : this.selected.filter(subArray => subArray.length > 0).map(subArray => parseInt(subArray[0], 10))
+      // return Object.keys(this.skillSearchList).length === 0 ? [] : this.skillSearchList.map(subArray => parseInt(subArray[1], 10))
     },
     // 处理颜色
     skillColor() {
@@ -277,6 +349,12 @@ export default {
     this.options = this.convertDataToCascader(data.data)
     console.log('sourceData', this.sourceData)
     console.log('fromData', this.fromData)
+    // 加载下拉框数据
+    this.categories = this.convertToDropdownFormat(data.data).reverse()
+    // 获取 区域 城市 列表
+    const result = await this.$API.select.reqGetRegionAndCity()
+    this.regionAndCityList = result.data
+    this.regionList = result.data.map(item => { return { value: item.region, label: item.region } })
   },
   methods: {
     // 用户修改
@@ -334,12 +412,19 @@ export default {
         this.departmentList = result.data
       }
     },
+    handleRegion(region) {
+      const data = this.regionAndCityList.filter(item => item.region === region)
+      this.cityList = data[0].cities.split(',')
+      this.city = ''
+      console.log(this.cityList)
+    },
     // 根据部门查询筛选用户,————需要改成点击查询或者回车查询所有
     // handleUserByDept() {
     //   this.fetchUsersList(this.page, this.limit)
     // },
     // 页面分页查询
     handleSearch() {
+      console.log(this.selected, this.intArray)
       this.page = 1
       this.fetchUsersList(this.page, this.limit)
     },
@@ -353,7 +438,9 @@ export default {
         page: this.page,
         limit: this.limit,
         deptId: department,
-        skillIdList: this.intArray.join(',')
+        skillIdList: this.intArray.join(','),
+        reign: this.region.trim(),
+        city: this.city.trim()
       }
       const resOfFetchUserList = await this.$API.user.reqGetUserPageWithSkills(queryInfo)
       if (resOfFetchUserList.code === 0) {
@@ -488,6 +575,25 @@ export default {
         }
       }
       return targetFormat
+    },
+    // 将原始数据转换为下拉框数据
+    convertToDropdownFormat(sourceData) {
+      const dropdownData = []
+
+      for (const category in sourceData) {
+        if (Object.prototype.hasOwnProperty.call(sourceData, category)) {
+          const categoryData = {
+            categoryName: category,
+            options: sourceData[category].map(item => ({
+              id: item.id,
+              name: item.name
+            }))
+          }
+          dropdownData.push(categoryData)
+        }
+      }
+
+      return dropdownData
     }
   }
 }
@@ -503,6 +609,14 @@ export default {
       margin: 0 0 40px 0;
       background-color: #008F91; /* 浅灰色查询块背景 */
       box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 浅灰色阴影 */
+
+      //下拉框
+      .el-select{
+        // padding-left: 10px;
+      }
+      ::v-deep .el-input__inner{
+        border: none;
+      }
     }
 
     .add-delete-buttons {
@@ -510,6 +624,23 @@ export default {
     }
   }
 
+  .el-form {
+    display: flex;
+    flex-wrap: nowrap; /* 防止下拉框换行 */
+  }
+
+  .el-form-item {
+    // margin-right: 10px; /* 为每个下拉框添加一些间距 */
+    margin-left: 20px;
+  }
+
+  /* 如果需要，可以添加媒体查询来调整响应式布局 */
+  @media (max-width: 600px) {
+    .el-form-item {
+      flex-direction: column;
+    }
+  }
+
   .el-form-item ::v-deep .el-form-item__label {
     color: white;
   }
@@ -576,7 +707,7 @@ export default {
     background-color: #008F91;
     border-color: rgba(57,106,254,1);
     color: #FFFFFF;
-    margin-top: 10px;
+    // margin-top: 10px;
   }
   ::v-deep .el-cascader__tags .el-tag:not(.is-hit) {
     border-color: rgba(57,106,254,1);

vue.config.js

@@ -39,7 +39,7 @@ module.exports = {
     proxy: {
       [process.env.VUE_APP_BASE_API]: {
         target: 'http://139.219.4.195:8003',
-        // target: 'http://192.168.1.157:8003',
+        // target: 'http://192.168.1.161:8003',
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
         }