ソースを参照

Merge branch 'amend_xia'

fengshaolong 2 年 前
コミット
f0db6d1af2

+ 338 - 82
src/views/recruitmentManagement/recruitmentPlan/recruitmentPlan.vue

@@ -6,7 +6,9 @@
     </div>
     <div class="content">
       <div class="con">
-        <el-button type="primary" icon="el-icon-plus" style="margin-left: 30px;">添加</el-button>
+        <el-button type="primary" icon="el-icon-plus" style="margin-left: 30px"
+          >添加</el-button
+        >
         <el-button icon="el-icon-edit-outline">修改</el-button>
         <el-button icon="el-icon-close">删除</el-button>
         <el-button icon="el-icon-download">合并查看</el-button>
@@ -19,20 +21,22 @@
         <div class="b_r">
           <i class="el-icon-refresh" title="刷新"></i>
         </div>
-        <div class="b_r">
+        <div class="b_r" @click="show = !show">
           <i class="el-icon-notebook-2" title="切换"></i>
         </div>
-        <div class="b_r ">
+        <div class="b_r">
           <el-dropdown :hide-on-click="false">
-            <div class=" b_rf">
+            <div class="b_rf">
               <i class="el-icon-s-grid" title="列"></i>
               <i class="el-icon-caret-bottom" title="列"></i>
             </div>
       <!-- 右侧栏 -->
       <!-- 下拉菜单 -->
-            <el-dropdown-menu slot="dropdown" style="height: 320px;overflow-y: scroll;">
+            <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>
-                <el-checkbox v-model="showColumn.inviteid">招聘计划id</el-checkbox>
+                <el-checkbox v-model="showColumn.inviteid"
+                  >招聘计划id</el-checkbox
+                >
               </el-dropdown-item>
               <el-dropdown-item>
                 <el-checkbox v-model="showColumn.serial">序号</el-checkbox>
@@ -44,16 +48,24 @@
                 <el-checkbox v-model="showColumn.want">招聘单位</el-checkbox>
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-checkbox v-model="showColumn.wanttype">招聘类型</el-checkbox>
+                <el-checkbox v-model="showColumn.wanttype"
+                  >招聘类型</el-checkbox
+                >
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-checkbox v-model="showColumn.wantyear">招聘计划年份</el-checkbox>
+                <el-checkbox v-model="showColumn.wantyear"
+                  >招聘计划年份</el-checkbox
+                >
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-checkbox v-model="showColumn.planwant">拟聘人数</el-checkbox>
+                <el-checkbox v-model="showColumn.planwant"
+                  >拟聘人数</el-checkbox
+                >
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-checkbox v-model="showColumn.wantnumber">已聘人数</el-checkbox>
+                <el-checkbox v-model="showColumn.wantnumber"
+                  >已聘人数</el-checkbox
+                >
               </el-dropdown-item>
               <el-dropdown-item>
                 <el-checkbox v-model="showColumn.remark">备注</el-checkbox>
@@ -62,29 +74,39 @@
                 <el-checkbox v-model="showColumn.creator">创建人</el-checkbox>
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-checkbox v-model="showColumn.creationtime">创建时间</el-checkbox>
+                <el-checkbox v-model="showColumn.creationtime"
+                  >创建时间</el-checkbox
+                >
               </el-dropdown-item>
               <el-dropdown-item>
                 <el-checkbox v-model="showColumn.modifier">修改人</el-checkbox>
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-checkbox v-model="showColumn.modifiertime">修改时间</el-checkbox>
+                <el-checkbox v-model="showColumn.modifiertime"
+                  >修改时间</el-checkbox
+                >
               </el-dropdown-item>
               <el-dropdown-item>
                 <el-checkbox v-model="showColumn.accessory">附件</el-checkbox>
               </el-dropdown-item>
             </el-dropdown-menu>
-            <!-- 下拉菜单 -->
           </el-dropdown>
+          <!-- 下拉菜单 -->
         </div>
         <plan-con></plan-con>
       </div>
     </div>
-    <!-- 展示列表 -->
-    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
-      @selection-change="handleSelectionChange">
-      <el-table-column type="selection">
-      </el-table-column>
+    <!-- 切换前列表 -->
+    <el-table
+      v-show="show"
+      ref="multipleTable"
+      :data="tableData"
+      tooltip-effect="dark"
+      style="width: 100%"
+      @select="handleSelectionChange"
+      @select-all="handleSelectionChangeall"
+    >
+      <el-table-column type="selection"> </el-table-column>
       <el-table-column label="招聘计划id" v-if="showColumn.inviteid">
         <template slot-scope="scope">{{ scope.row.date }}</template>
       </el-table-column>
@@ -98,26 +120,168 @@
       </el-table-column>
       <el-table-column prop="type" label="招聘类型" v-if="showColumn.wanttype">
       </el-table-column>
-      <el-table-column prop="year" label="招聘计划年份" v-if="showColumn.wantyear">
+      <el-table-column
+        prop="year"
+        label="招聘计划年份"
+        v-if="showColumn.wantyear"
+      >
       </el-table-column>
-      <el-table-column prop="number" label="拟聘人数" v-if="showColumn.planwant">
+      <el-table-column
+        prop="number"
+        label="拟聘人数"
+        v-if="showColumn.planwant"
+      >
       </el-table-column>
       <el-table-column prop="num" label="已聘人数" v-if="showColumn.wantnumber">
       </el-table-column>
-      <el-table-column label="备注" v-if="showColumn.remark">
-      </el-table-column>
+      <el-table-column label="备注" v-if="showColumn.remark"> </el-table-column>
       <el-table-column prop="person" label="创建人" v-if="showColumn.creator">
       </el-table-column>
       <el-table-column label="创建时间" v-if="showColumn.creationtime">
       </el-table-column>
       <el-table-column label="修改人" v-if="showColumn.modifier">
       </el-table-column>
-      <el-table-column prop="address" label="修改时间" show-overflow-tooltip v-if="showColumn.modifiertime">
+      <el-table-column
+        prop="address"
+        label="修改时间"
+        show-overflow-tooltip
+        v-if="showColumn.modifiertime"
+      >
       </el-table-column>
-      <el-table-column prop="address" label="附件" show-overflow-tooltip v-if="showColumn.accessory">
+      <el-table-column
+        prop="address"
+        label="附件"
+        show-overflow-tooltip
+        v-if="showColumn.accessory"
+      >
       </el-table-column>
     </el-table>
-    <!-- 展示列表 -->
+    <!-- 切换前列表 -->
+    <!-- 切换后列表 -->
+    <div v-show="!show">
+      <div v-for="(item, index) in tableData" class="col-md" :key="index">
+        <el-checkbox
+          v-model="item.show"
+          style="width: 100%;white-space: normal;"
+          @change="handleCheckedCitiesChange(item)"
+          class="checkboxs"
+        >
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.inviteid">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">招聘计划id</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.date }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.serial">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">序号</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.date }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.organid">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">机构id</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.date }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.want">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">招聘单位</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.name }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.wanttype">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">招聘类型</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.type }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.wantyear">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">招聘计划年份</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.year }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.planwant">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">拟聘人数</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.number }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.wantnumber">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">已聘人数</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.num }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.remark">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">备注</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.num }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.creator">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">创建人</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.date }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.creationtime">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">创建时间</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.year }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.modifier">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">修改人</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.person }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.modifiertime">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">修改时间</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.year }}</div>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" class="grid-text" v-if="showColumn.accessory">
+            <el-col :span="8">
+              <div class="grid-content bg-purple">附件</div>
+            </el-col>
+            <el-col :span="16">
+              <div class="grid-content bg-purple">{{ item.year }}</div>
+            </el-col>
+          </el-row>
+        </el-checkbox>
+      </div>
+    </div>
+    <!-- 切换后列表 -->
   </div>
 </template>
 
@@ -128,41 +292,87 @@ export default {
   data() {
     return {
       visible: false,
-      checkList: ['选中且禁用', '复选框 A'],
-      tableData: [{
-        date: '1',
-        name: '安徽省直',
-        type: '统一招聘',
-        number: '5',
-        num: '0',
-        person: '张三',
-        year: '2022',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-08',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-06',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-07',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }],
+      show: true, //表单切换
+      checkList: ["选中且禁用", "复选框 A"],
+      tableData: [
+        {
+          date: "1",
+          name: "安徽省直",
+          type: "统一招聘",
+          number: "5",
+          num: "0",
+          person: "张三",
+          year: "2022",
+          show: false,
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "1",
+          name: "安徽省直",
+          type: "统一招聘",
+          number: "5",
+          num: "0",
+          show: false,
+          person: "张三",
+          year: "2022",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "1",
+          name: "安徽省直",
+          type: "统一招聘",
+          number: "5",
+          num: "0",
+          person: "张三",
+          show: false,
+          year: "2022",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "1",
+          name: "安徽省直",
+          type: "统一招聘",
+          number: "5",
+          num: "0",
+          person: "张三",
+          show: false,
+          year: "2022",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "1",
+          name: "安徽省直",
+          type: "统一招聘",
+          number: "5",
+          show: false,
+          num: "0",
+          person: "张三",
+          year: "2022",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "1",
+          name: "安徽省直",
+          type: "统一招聘",
+          number: "5",
+          num: "0",
+          show: false,
+          person: "张三",
+          year: "2022",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+        {
+          date: "1",
+          name: "安徽省直",
+          type: "统一招聘",
+          number: "5",
+          num: "0",
+          show: false,
+          person: "张三",
+          year: "2022",
+          address: "上海市普陀区金沙江路 1518 弄",
+        },
+      ],
       multipleSelection: [],
       showColumn: {
         inviteid: false,
@@ -181,13 +391,42 @@ export default {
         modifiertime: true,
         accessory: true,
       },
-
-    }
+      //必填
+      // filterItems: [
+      //   {
+      //     field: "FState", //必填
+      //     type: 1, //必填
+      //     label: "函号", //必填
+      //     // options: billStates, //必填
+      //     // showGapBottom: true, //选填
+      //     // autoAssign: true, //选填
+      //   },
+      //   {
+      //     field: "FBillNo", //必填
+      //     type: 2, //必填
+      //     label: "年份", //必填
+      //   },
+      //   {
+      //     field: "FUserName", //必填
+      //     type: 3, //必填
+      //     label: "下拉框", //必填
+      //     //value: 'aaa', //初始值
+      //   },
+      //   {
+      //     field: "FCustomerName",
+      //     type: 4,
+      //     label: "树选择框",
+      //     // showGapBottom: true, //选填
+      //     //value: 'bb', //初始值
+      //   },
+        
+      // ],
+    };
   },
   mounted() {
     // 发请求得到showColumnInitData的列的名字
     if (localStorage.getItem("columnSet")) {
-      this.showColumn = JSON.parse(localStorage.getItem("columnSet"))
+      this.showColumn = JSON.parse(localStorage.getItem("columnSet"));
     } else {
       this.showColumn = {
         inviteid: false,
@@ -209,40 +448,42 @@ export default {
     }
   },
   beforeUpdate() {
-    this.$nextTick(() => { //在数据加载完,重新渲染表格
-      this.$refs['multipleTable'].doLayout();
-    })
+    if (this.show) {
+      this.$nextTick(() => {
+        //在数据加载完,重新渲染表格
+        this.$refs["multipleTable"].doLayout();
+      });
+    }
   },
   methods: {
-    toggleSelection(rows) {
-      if (rows) {
-        rows.forEach(row => {
-          this.$refs.multipleTable.toggleRowSelection(row);
+    handleSelectionChange(selection, val) {
+      val.show = !val.show;
+    },
+    handleSelectionChangeall(selection) {
+      if (selection.length == 0) {
+        this.tableData.forEach((val) => {
+          val.show = false;
         });
       } else {
-        this.$refs.multipleTable.clearSelection();
+        selection.forEach((val) => {
+          val.show = true;
+        });
       }
     },
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
-    },
-    handleClick(row) {
-      console.log(row);
+    handleCheckedCitiesChange(val) {
+      this.$refs.multipleTable.toggleRowSelection(val);
     },
     saveColumn() {
-      localStorage.setItem("columnSet", JSON.stringify(this.showColumn))
+      localStorage.setItem("columnSet", JSON.stringify(this.showColumn));
       this.visible = false;
     },
-
   },
   name: "recruitmentPlan",
   components: {
     planHeader,
     planCon,
   },
-
 };
-
 </script>
 
 <style scoped>
@@ -275,7 +516,7 @@ export default {
 }
 
 .b_r {
-  border: 1px solid #DCDCDC;
+  border: 1px solid #dcdcdc;
   border-right: none;
   color: #000;
   font-size: 24px;
@@ -288,7 +529,7 @@ export default {
 
 .b_rf {
   display: flex;
-  border-right: 1px solid #DCDCDC;
+  border-right: 1px solid #dcdcdc;
   border-radius: 0 5px 5px 0;
   align-items: center;
 }
@@ -351,4 +592,19 @@ export default {
   display: flex;
   flex-direction: column;
 }
+
+.col-md {
+  background: #fff;
+  padding: 15px;
+}
+
+.grid-text {
+  margin-top: 5px;
+}
+/deep/.el-checkbox__label {
+  width: 100%;
+}
+/deep/ .checkboxs .el-checkbox__input {
+  margin-left: 10px;
+}
 </style>