调整车间排产计划的布局

fhKeeper/formulahousekeeper/timesheet-workshop/src/views/plan/orderInsert.vue

@@ -20,7 +20,7 @@
           <el-link type="primary" :underline="false" @click="addPlan()">{{
             `新增${titleText}`
           }}</el-link>
-          <el-link type="primary" :underline="false" @click="importDataDialog=true">{{ "导入" }}</el-link>
+          <el-link type="primary" :underline="false" @click="importDataDialog = true">{{ "导入" }}</el-link>
           <el-link type="primary" :underline="false" @click="exportData()"
             :download="this.planType == 0 ? '今日计划' : this.planType == 1 ? '明日计划' : this.planType == 2 ? '插单计划' : '' + '.xlsx'">{{
               "导出"
@@ -28,41 +28,71 @@
         </div>
       </div>
     </div>
-    <div class="layout-container-center">
+    <div class="layout-container-center grand">
       <!-- tab 切换 -->
-      <div class="today-tab">
+      <!-- <div class="today-tab">
         <div v-for="(item, index) in hasSetDeptList" :key="index" :class="`${todayTabIndex === index ? 'on' : ''}`"
           @click="tabChange(item, index)">
           {{ item.departmentName }}
         </div>
+      </div> -->
+
+      <div class="left-laowang" style="flex: 0 0 180px; overflow: hidden;">
+        <div class="left-laowangText">
+          {{ currentDepartmentText }}
+        </div>
+        <div class="left-laowangTree">
+          <el-tree :data="departmentList" @node-click="treeChange" :props="defaultProps" :draggable="adjustPosition"
+            :allow-drop="allowDrop" :expand-on-click-node="false">
+            <span class="custom-tree-node" slot-scope="{ node }">
+              <span class="spanWitdh">
+                <span v-if="user.userNameNeedTranslate == '1'">
+                  <ww-open-data type='departmentName' :openid='node.label'></ww-open-data>
+                </span>
+                <span v-else>
+                  {{ node.label }}
+                </span>
+              </span>
+            </span>
+          </el-tree>
+        </div>
       </div>
 
+      <div class="line line-second">
+        <div>
+          -
+          -
+          -
+        </div>
+      </div>
       <!-- 各部分数据列表 -->
-      <el-table :data="tableData" :height="'0'" style="width: 100%; flex: 1" v-loading="tableDataLoading"
-        @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column prop="taskChangeNoticeNum" label="通知号" width="180"></el-table-column>
-        <el-table-column prop="taskName" label="任务名称" width="180"></el-table-column>
-        <el-table-column prop="taskTypeName" label="任务类型" width="180"></el-table-column>
-        <el-table-column prop="planManNum" label="计划人数" width="180"> </el-table-column>
-        <el-table-column prop="num" label="数量" width="180"></el-table-column>
-        <el-table-column prop="planWorkHour" label="计划工时" width="180"></el-table-column>
-        <el-table-column prop="totalMoney" label="工钱" width="180"></el-table-column>
-        <el-table-column prop="foremanName" label="工长" width="180">
+      <div class="box-second-father conterTable" style="width: 200px; flex: 1 1 0%">
+        <el-table :data="tableData" :height="'0'" style="width: 100%;" v-loading="tableDataLoading"
+          @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="taskChangeNoticeNum" label="通知号" width="180"></el-table-column>
+          <el-table-column prop="taskName" label="任务名称" width="180"></el-table-column>
+          <el-table-column prop="taskTypeName" label="任务类型" width="180"></el-table-column>
+          <el-table-column prop="planManNum" label="计划人数" width="180"> </el-table-column>
+          <el-table-column prop="num" label="数量" width="180"></el-table-column>
+          <el-table-column prop="planWorkHour" label="计划工时" width="180"></el-table-column>
+          <el-table-column prop="totalMoney" label="工钱" width="180"></el-table-column>
+          <el-table-column prop="foremanName" label="工长" width="180">
             <template slot-scope="scope">
-            <div @click="getFormenDetail(scope.row)" class="colorText">
-              {{ scope.row.foremanName}}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="startDate" label="开工时间" width="180"></el-table-column>
-        <el-table-column prop="endDate" label="完工时间" width="180"></el-table-column>
-        <el-table-column label="操作" :fixed="'right'">
-          <template slot-scope="scope">
-            <div @click="editPlan(scope.row)" class="colorText">编辑</div>
-          </template>
-        </el-table-column>
-      </el-table>
+              <div @click="getFormenDetail(scope.row)" class="colorText">
+                {{ scope.row.foremanName }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="startDate" label="开工时间" width="180"></el-table-column>
+          <el-table-column prop="endDate" label="完工时间" width="180"></el-table-column>
+          <el-table-column label="操作" :fixed="'right'">
+            <template slot-scope="scope">
+              <div @click="editPlan(scope.row)" class="colorText">编辑</div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
     </div>
     <div class="layout-container-floor">
       <el-button type="primary" size="mini" @click="allocationPlan">下发计划</el-button>
@@ -96,13 +126,15 @@
           </el-form-item>
           <el-form-item label="计划工时" prop="planWorkHour">
             <div style="display: flex;">
-              <el-input v-model="todayPlanForm.planWorkHour" type="number" placeholder="请输入" style="flex: 1;" maxlength="5"></el-input>
+              <el-input v-model="todayPlanForm.planWorkHour" type="number" placeholder="请输入" style="flex: 1;"
+                maxlength="5"></el-input>
               <div style="margin-left: 10px;">分钟</div>
             </div>
           </el-form-item>
           <el-form-item label="单价" prop="moneyOfJob">
             <div style="display: flex;">
-              <el-input v-model="todayPlanForm.moneyOfJob" type="number" placeholder="请输入" style="flex: 1;" maxlength="5"></el-input>
+              <el-input v-model="todayPlanForm.moneyOfJob" type="number" placeholder="请输入" style="flex: 1;"
+                maxlength="5"></el-input>
               <div style="margin-left: 10px;">元/小时</div>
             </div>
           </el-form-item>
@@ -154,43 +186,43 @@
         <el-button type="primary" @click="deptSetDialog = false">确 定</el-button>
       </span>
     </el-dialog>
-    
+
     <!-- 任务类型管理 -->
     <el-dialog title="任务类型管理" :visible.sync="taskTypeDialog" width="800" :before-close="handleClose">
       <div>
         <el-table :data="taskTypeList" style="width: 100%; flex: 1" v-loading="tableDataLoading">
-        <el-table-column prop="taskName" label="序号" width="180">
-          <template slot-scope="scope">
-            <div>{{scope.$index+1}}</div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="taskTypeName" label="类型名称" width="180"></el-table-column>
-        <el-table-column label="操作">
-          <template slot-scope="scope">
-            <span @click="taskTypeAddDialog=true ,editTaskType(scope.row)" class="colorText">编辑</span>
-            <span @click="deleteTaskType(scope.row)" class="colorText">删除</span>
-          </template>
-        </el-table-column>
-      </el-table>
+          <el-table-column prop="taskName" label="序号" width="180">
+            <template slot-scope="scope">
+              <div>{{ scope.$index + 1 }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="taskTypeName" label="类型名称" width="180"></el-table-column>
+          <el-table-column label="操作">
+            <template slot-scope="scope">
+              <span @click="taskTypeAddDialog = true, editTaskType(scope.row)" class="colorText">编辑</span>
+              <span @click="deleteTaskType(scope.row)" class="colorText">删除</span>
+            </template>
+          </el-table-column>
+        </el-table>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="
           (taskTypeDialog = false)
           ">取 消</el-button>
-        <el-button type="primary" @click="taskTypeAddDialog=true,editTaskType()">新增</el-button>
+        <el-button type="primary" @click="taskTypeAddDialog = true, editTaskType()">新增</el-button>
       </span>
     </el-dialog>
 
     <!-- 任务类型新增 -->
     <el-dialog title="新增任务类型" :visible.sync="taskTypeAddDialog" width="800" :before-close="handleClose">
-        <div>
-          <el-form ref="taskTypeForm" :rules="taskTypeFormrules" :model="taskTypeForm" label-width="120px">
+      <div>
+        <el-form ref="taskTypeForm" :rules="taskTypeFormrules" :model="taskTypeForm" label-width="120px">
           <el-form-item label="分类名称" style="width: 100%" prop="taskTypeName">
             <el-input v-model="taskTypeForm.taskTypeName" placeholder="请输入"></el-input>
           </el-form-item>
-          </el-form>
-        </div>
-        <span slot="footer" class="dialog-footer">
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
         <el-button @click="
           (taskTypeAddDialog = false)
           ">取 消</el-button>
@@ -201,13 +233,13 @@
     <!-- 工长弹框 -->
     <el-dialog title="工长信息" :visible.sync="foremanDetailDialog" width="30%" :before-close="handleClose">
       <div>
-        <span>姓名:{{this.foremanDetail.name}}</span>
+        <span>姓名:{{ this.foremanDetail.name }}</span>
       </div>
       <div>
-        <span>工种:{{this.foremanDetail.workType}}</span>
+        <span>工种:{{ this.foremanDetail.workType }}</span>
       </div>
       <div>
-        <span>工号:{{this.foremanDetail.jobNumber}}</span>
+        <span>工号:{{ this.foremanDetail.jobNumber }}</span>
       </div>
       <span slot="footer" class="dialog-footer">
         <el-button @click="foremanDetailDialog = false">关闭</el-button>
@@ -215,24 +247,28 @@
     </el-dialog>
 
     <!--导入计划 -->
-    <el-dialog :title="this.titleText+'导入'" :visible.sync="importDataDialog"  width="500px">
-        <p>1. 下载
-        <el-link type="primary" style="margin-left:5px;" :underline="false" :href="'./upload/'+'插单计划导入模板.xlsx'" :download="'插单计划导入模板.xlsx'">{{'插单计划导入模板.xlsx'}}</el-link>
-        </p>
-        <p style="display: flex;justify-content: center;">
-            <el-upload ref="upload"  action="#" :limit="1" :http-request="importData" :show-file-list="false">
-              <el-button type="primary" :underline="false" :loading="importingData">{{$t("other.startImporting")}}</el-button>
-            </el-upload>
-        </p>
+    <el-dialog :title="this.titleText + '导入'" :visible.sync="importDataDialog" width="500px">
+      <p>1. 下载
+        <el-link type="primary" style="margin-left:5px;" :underline="false" :href="'./upload/' + '插单计划导入模板.xlsx'"
+          :download="'插单计划导入模板.xlsx'">{{ '插单计划导入模板.xlsx' }}</el-link>
+      </p>
+      <p style="display: flex;justify-content: center;">
+        <el-upload ref="upload" action="#" :limit="1" :http-request="importData" :show-file-list="false">
+          <el-button type="primary" :underline="false" :loading="importingData">{{ $t("other.startImporting")
+          }}</el-button>
+        </el-upload>
+      </p>
     </el-dialog>
   </div>
 </template>
   
 <script>
 import delete$ from 'dingtalk-jsapi/api/biz/cspace/delete';
+import dragMixin from "@/common/js/tensile.js";
 export default {
   name: "planComponent",
   components: {},
+  mixins: [dragMixin],
   props: {
     planType: {
       type: String,
@@ -255,9 +291,9 @@ export default {
       props: { multiple: true },
       hasSetDeptList: [],
       titleName: "",
-      taskTypeDialog:false,
-      importDataDialog:false,
-      importingData:false,
+      taskTypeDialog: false,
+      importDataDialog: false,
+      importingData: false,
       todayPlanForm: {
         id: null,
         taskChangeNoticeNum: "",
@@ -274,21 +310,21 @@ export default {
         endDate: "",
         describtion: "",
         versionNumber: "",
-        checkType:0,
+        checkType: 0,
       },
-       taskTypeForm: {
+      taskTypeForm: {
         id: null,
         companyId: "",
         taskTypeName: "",
       },
       user: JSON.parse(sessionStorage.getItem("user")),
-      foremanDetailDialog:false,
-      foremanDetail:{},
-      taskTypeList:[],
-      checkTypeList:[
-        {id:0,name:"自检"},{id:1,name:"互检"},{id:2,name:"专检"}
+      foremanDetailDialog: false,
+      foremanDetail: {},
+      taskTypeList: [],
+      checkTypeList: [
+        { id: 0, name: "自检" }, { id: 1, name: "互检" }, { id: 2, name: "专检" }
       ],
-      taskTypeAddDialog:false,
+      taskTypeAddDialog: false,
       todayTabIndex: 0,
       tableDataLoading: false,
       tableData: [],
@@ -323,15 +359,15 @@ export default {
           { required: true, message: "分类名称", trigger: "blur" },
         ],
       },
+      currentDepartmentText: ''
     };
   },
   computed: {},
   watch: {},
-  created() { },
   mounted() {
     this.getDepartmentList(),
       this.getPlanDeptSet(),
-      this.getHasSetPlanDeptList(),
+      // this.getHasSetPlanDeptList(),
       this.getProductList(),
       this.getTaskTypeList();
   },
@@ -354,17 +390,17 @@ export default {
         endDate: "",
         describtion: "",
         versionNumber: "",
-        checkType:0,
+        checkType: 0,
       }
     },
-    getFormenDetail(item){
-      this.foremanDetailDialog=true;
+    getFormenDetail(item) {
+      this.foremanDetailDialog = true;
       this.http.post(
         "/user/getUserInfo",
-        {userId:item.foremanId},
+        { userId: item.foremanId },
         (res) => {
           if (res.code == "ok") {
-            this.foremanDetail=res.data
+            this.foremanDetail = res.data
           } else {
             this.$message({
               message: res.msg,
@@ -395,6 +431,11 @@ export default {
           if (res.code == "ok") {
             let dptlist = JSON.parse(JSON.stringify(res.data));
             this.departmentList = this.changeArr(dptlist);
+            if(this.departmentList[0]) {
+              const { value, label } = this.departmentList[0]
+              this.currentDepartmentText = label
+              this.getTableData(value)
+            }
           } else {
             this.$message({
               message: res.msg,
@@ -410,6 +451,11 @@ export default {
         }
       );
     },
+    treeChange(item) {
+      const { value, label } = item
+      this.currentDepartmentText = label
+      this.getTableData(value)
+    },
     changeArr(arr) {
       for (var i = 0; i < arr.length; i++) {
         if (arr[i].id != -1 && arr[i].id != 0) {
@@ -589,7 +635,7 @@ export default {
           let stationId =
             this.todayPlanForm.stationId[
             this.todayPlanForm.stationId.length - 1
-            ];  
+            ];
           this.$delete(this.todayPlanForm, 'product')
           this.$delete(this.todayPlanForm, 'planProcedureTotals')
           this.http.post(
@@ -752,7 +798,7 @@ export default {
           if (res.code == "ok") {
             var filePath = res.data;
             const a = document.createElement('a'); // 创建a标签
-            a.setAttribute('download',(this.planType == 0 ? '今日计划' : this.planType == 1 ? '明日计划' : this.planType == 2 ? '插单计划' : '' )+ '.xlsx');// download属性
+            a.setAttribute('download', (this.planType == 0 ? '今日计划' : this.planType == 1 ? '明日计划' : this.planType == 2 ? '插单计划' : '') + '.xlsx');// download属性
             a.setAttribute('href', filePath);// href链接
             a.click(); //自执行点击事件
             a.remove();
@@ -801,13 +847,13 @@ export default {
         }
       );
     },
-    getTaskTypeList(){
-        this.http.post(
+    getTaskTypeList() {
+      this.http.post(
         "/task-type/list",
         {},
         (res) => {
           if (res.code == "ok") {
-            this.taskTypeList=res.data
+            this.taskTypeList = res.data
           } else {
             this.$message({
               message: res.msg,
@@ -823,7 +869,7 @@ export default {
         }
       );
     },
-    addTaskType(formName){
+    addTaskType(formName) {
       console.log(this.taskTypeForm);
       this.$refs[formName].validate((valid) => {
         if (valid) {
@@ -841,7 +887,7 @@ export default {
                     this.taskTypeForm.id == null ? "新增成功" : "修改成功",
                   type: "success",
                 });
-                this.taskTypeForm=[];
+                this.taskTypeForm = [];
                 this.taskTypeAddDialog = false;
               } else {
                 this.$message({
@@ -863,47 +909,85 @@ export default {
         }
       });
     },
-    deleteTaskType(item){
-      let param = {id: item.id};
-      this.$confirm('是否确认删除该分类',this.$t('other.prompts'), {
-          confirmButtonText: this.$t('btn.determine'),
-          cancelButtonText: this.$t('btn.cancel'),
-          type: "warning"
+    deleteTaskType(item) {
+      let param = { id: item.id };
+      this.$confirm('是否确认删除该分类', this.$t('other.prompts'), {
+        confirmButtonText: this.$t('btn.determine'),
+        cancelButtonText: this.$t('btn.cancel'),
+        type: "warning"
       })
-      .then(() => {
-          this.http.post('/task-type/delete',param,
-          res => {
+        .then(() => {
+          this.http.post('/task-type/delete', param,
+            res => {
               if (res.code == "ok") {
                 this.getTaskTypeList();
-                  this.$message({
-                      message: this.$t('message.successfullyDeleted'),
-                      type: "success"
-                  });
+                this.$message({
+                  message: this.$t('message.successfullyDeleted'),
+                  type: "success"
+                });
               } else {
-                  this.$message({
-                      message: res.msg,
-                      type: "error"
-                  });
+                this.$message({
+                  message: res.msg,
+                  type: "error"
+                });
               }
-          },
-          error => {
+            },
+            error => {
               this.$message({
-                  message: error,
-                  type: "error"
+                message: error,
+                type: "error"
               });
-              }
+            }
           );
-      })
-      .catch(() => {});
+        })
+        .catch(() => { });
     },
-    editTaskType(row){
+    editTaskType(row) {
       if (row == null) {
-          this.taskTypeForm = {}
+        this.taskTypeForm = {}
       } else {
-          this.taskTypeForm = row;
+        this.taskTypeForm = row;
       }
     },
   },
+  created() {
+    this.initDrag([
+      {
+        type: "LR",
+        domClass: {
+          // 中间分割线的名字
+          resize: "line-line",
+          // 左侧盒子的名字
+          left: "box-left",
+          // 右侧盒子的名字
+          right: "box-right",
+          // 父级的名字
+          box: "box-father",
+        },
+        otherInfo: {
+          // 限制左边栏最低宽度
+          leftWidth: 120,
+        },
+      },
+      {
+        type: "LR",
+        domClass: {
+          // 中间分割线的名字
+          resize: "line-second",
+          // 左侧盒子的名字
+          left: "left-laowang",
+          // 右侧盒子的名字
+          right: "box-second-father",
+          // 父级的名字
+          box: "grand",
+        },
+        otherInfo: {
+          // 限制左边栏最低宽度
+          leftWidth: 120,
+        },
+      },
+    ]);
+  },
 };
 </script>
 <style scoped lang='scss'>
@@ -919,19 +1003,46 @@ export default {
   // flex-wrap: wrap;
   flex-direction: column;
   box-sizing: border-box;
-  padding: 10px;
+  // padding: 10px;
 
   .layout-container-header,
   .layout-container-center,
   .layout-container-floor {
     width: 100%;
+    box-sizing: border-box;
+  }
+
+  .layout-container-header {
+    padding: 10px 10px 0 10px;
+    background: #F2F2F2;
   }
 
   .layout-container-center {
+    width: 100%;
     flex: 1;
     display: flex;
-    flex-direction: column;
-    overflow: auto;
+    flex-direction: row;
+
+    .conterTable {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .line {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #f2f2f2;
+      cursor: w-resize;
+      width: 10px;
+
+      div {
+        line-height: 5px;
+        text-align: center;
+        color: rgb(151, 151, 151);
+      }
+    }
   }
 
   .layout-container-floor {
@@ -1045,6 +1156,53 @@ export default {
       }
     }
   }
+
+  .left-laowang {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border-bottom: 1px solid #EBEEF5;
+
+    .left-laowangTree {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .left-laowangText {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 48px;
+      border-bottom: 1px solid #EBEEF5;
+      color: #02A7F0;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    position: relative;
+    box-sizing: border-box;
+    width: 10%;
+
+    .spanWitdh {
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 36px;
+      display: inline-block;
+    }
+  }
 }
 </style>
   

fhKeeper/formulahousekeeper/timesheet-workshop/src/views/plan/planComponent.vue

@@ -26,13 +26,13 @@
             `新增${titleText}`
           }}</el-link>
           <el-link type="primary" :underline="false" @click="importDataDialog = true">{{ "导入" }}</el-link>
-          <el-link type="primary" :underline="false" @click="exportDialog=true">{{"导出"}}</el-link>
+          <el-link type="primary" :underline="false" @click="exportDialog = true">{{ "导出" }}</el-link>
         </div>
       </div>
     </div>
-    <div class="layout-container-center">
+    <div class="layout-container-center grand">
       <!-- tab 切换 -->
-      <div class="today-tab-btn">
+      <!-- <div class="today-tab-btn">
         <div class="today-tab">
           <div v-for="(item, index) in hasSetDeptList" :key="index" :class="`${todayTabIndex === index ? 'on' : ''}`"
             @click="tabChange(item, index)">
@@ -42,49 +42,81 @@
         <div style="margin-left: 15px;" v-if="planType == 0">
           <el-button type="primary" size="mini" @click="(deptSetDialog = true), getPlanDeptSet()">部门设置</el-button>
         </div>
+      </div> -->
+      <div class="left-laowang" style="flex: 0 0 180px; overflow: hidden;">
+        <div class="left-laowangText">
+          {{ currentDepartmentText }}
+        </div>
+        <div class="left-laowangTree">
+          <el-tree :data="departmentList" @node-click="treeChange" :props="defaultProps" :draggable="adjustPosition" :allow-drop="allowDrop"
+            :expand-on-click-node="false">
+            <span class="custom-tree-node" slot-scope="{ node }">
+              <span class="spanWitdh">
+                <span v-if="user.userNameNeedTranslate == '1'">
+                  <ww-open-data type='departmentName' :openid='node.label'></ww-open-data>
+                </span>
+                <span v-else>
+                  {{ node.label }}
+                </span>
+              </span>
+            </span>
+          </el-tree>
+        </div>
       </div>
 
+      <div class="line line-second">
+        <div>
+          -
+          -
+          -
+        </div>
+      </div>
 
       <!-- 各部分数据列表 -->
-      <el-table :data="tableData" style="width: 100%;" height="0" v-loading="tableDataLoading"
-        @selection-change="handleSelectionChange">
-        <el-table-column type="selection" width="55"> </el-table-column>
-        <el-table-column prop="productSchedulingNum" label="排产工单号" width="180">
-          <template slot-scope="scope">
-            <div @click="toPlanDetil(scope.row)" class="colorText">
-              {{ scope.row.productSchedulingNum }}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="productName" label="产品名称" width="180">
-        </el-table-column>
-        <el-table-column prop="projectCode" label="项目代码" width="180">
-        </el-table-column>
-        <el-table-column prop="num" label="数量" width="100"> </el-table-column>
-        <el-table-column prop="mainProcess" label="主工序" width="180">
-        </el-table-column>
-        <el-table-column prop="stationName" label="工位名称" width="180">
-        </el-table-column>
-        <el-table-column prop="foremanName" label="工长" width="140">
-          <template slot-scope="scope">
-            <div @click="getFormenDetail(scope.row)" class="colorText">
-              {{ scope.row.foremanName }}
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="startDate" label="开工时间" width="140">
-        </el-table-column>
-        <el-table-column prop="endDate" label="完工时间" width="140">
-        </el-table-column>
-        <el-table-column label="操作" :fixed="'right'">
-          <template slot-scope="scope">
-            <div @click="editPlan(scope.row)" class="colorText">编辑</div>
-            <div @click="deletePlan(scope.row.id)" class="colorText">删除</div>
-            <div v-if="jisuanDate(scope.row.startDate) > 30" @click="hidePlan(scope.row.id, scope.row.hideState)"
-              class="colorText">{{ scope.row.hideState == 0 ? '隐藏' : '取消隐藏' }}</div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <div class="box-second-father conterTable" style="width: 200px; flex: 1 1 0%">
+        <el-table :data="tableData" border height="0" v-loading="tableDataLoading"
+          @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55"> </el-table-column>
+          <el-table-column prop="productSchedulingNum" label="排产工单号" width="180">
+            <template slot-scope="scope">
+              <div @click="toPlanDetil(scope.row)" class="colorText">
+                {{ scope.row.productSchedulingNum }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="productName" label="产品名称" width="180">
+          </el-table-column>
+          <el-table-column prop="projectCode" label="项目代码" width="180">
+          </el-table-column>
+          <el-table-column prop="num" label="数量" width="100"> </el-table-column>
+          <el-table-column prop="mainProcess" label="主工序" width="180">
+          </el-table-column>
+          <el-table-column prop="stationName" label="工位名称" width="180">
+          </el-table-column>
+          <el-table-column prop="foremanName" label="工长" width="140">
+            <template slot-scope="scope">
+              <div @click="getFormenDetail(scope.row)" class="colorText">
+                {{ scope.row.foremanName }}
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="startDate" label="开工时间" width="140">
+          </el-table-column>
+          <el-table-column prop="endDate" label="完工时间" width="140">
+          </el-table-column>
+          <el-table-column label="操作" :fixed="'right'" width="140">
+            <template slot-scope="scope">
+              <div class="controls_btn">
+                <div @click="editPlan(scope.row)" class="colorText">编辑</div>
+                <div @click="deletePlan(scope.row.id)" class="colorText">删除</div>
+                <div v-if="jisuanDate(scope.row.startDate) > 30" @click="hidePlan(scope.row.id, scope.row.hideState)"
+                  class="colorText">{{ scope.row.hideState == 0 ? '隐藏' : '取消隐藏' }}</div>
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+
     </div>
     <div class="layout-container-floor">
       <el-button type="primary" size="mini" @click="allocationPlan">下发计划</el-button>
@@ -243,42 +275,41 @@
 
     <!--导出计划 -->
     <el-dialog :title="this.titleText + '导出'" :visible.sync="exportDialog" width="500px">
-        <el-form ref="form3" :model="exportParam">
-            <el-form-item prop="rangeDatas" :label="$t('time.dateRange')">
-                <el-date-picker
-                    v-model="exportParam.rangeDatas" :editable="false" 
-                    format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
-                    :clearable="true" 
-                    :range-separator="$t('other.to')"
-                    type="daterange" 
-                    :start-placeholder="$t('time.startDate')"
-                    :end-placeholder="$t('time.endDate')"
-                ></el-date-picker>
-            </el-form-item>
-            <el-form-item prop="departmentId" :label="'选择部门'">
-                <el-cascader  v-model="departmentIdArray" :options="departmentList" :placeholder="'全部部门'"
-                :props="{ checkStrictly: true,expandTrigger: 'hover' }" collapse-tags :show-all-levels="false" clearable
-                size="small" style="margin-bottom: 10px;width:180px"
-              ></el-cascader>
-            </el-form-item>
-            <el-form-item prop="departmentId" :label="'选择产品'">
-              <!-- 产品筛选 -->
-              <el-select   v-model="exportParam.productId" :placeholder="'全部产品'" clearable filterable size="small" style="width:180px">
-                <el-option v-for="(item, index) in productList" :key="index" :label="item.name" :value="item.id"></el-option>
-              </el-select>
-            </el-form-item>
-        </el-form>
-        <div slot="footer" class="dialog-footer">
-            <el-button type="primary" @click="exportData" style="width:100%;" :loading="listLoading">{{$t('export.export')}}</el-button>
-        </div>
+      <el-form ref="form3" :model="exportParam">
+        <el-form-item prop="rangeDatas" :label="$t('time.dateRange')">
+          <el-date-picker v-model="exportParam.rangeDatas" :editable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
+            :clearable="true" :range-separator="$t('other.to')" type="daterange" :start-placeholder="$t('time.startDate')"
+            :end-placeholder="$t('time.endDate')"></el-date-picker>
+        </el-form-item>
+        <el-form-item prop="departmentId" :label="'选择部门'">
+          <el-cascader v-model="departmentIdArray" :options="departmentList" :placeholder="'全部部门'"
+            :props="{ checkStrictly: true, expandTrigger: 'hover' }" collapse-tags :show-all-levels="false" clearable
+            size="small" style="margin-bottom: 10px;width:180px"></el-cascader>
+        </el-form-item>
+        <el-form-item prop="departmentId" :label="'选择产品'">
+          <!-- 产品筛选 -->
+          <el-select v-model="exportParam.productId" :placeholder="'全部产品'" clearable filterable size="small"
+            style="width:180px">
+            <el-option v-for="(item, index) in productList" :key="index" :label="item.name" :value="item.id"></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="exportData" style="width:100%;" :loading="listLoading">{{ $t('export.export')
+        }}</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
   
 <script>
+import dragMixin from "@/common/js/tensile.js";
+import util from "@/common/js/util";
+
 export default {
   name: "planComponent",
   components: {},
+  mixins: [dragMixin],
   props: {
     planType: {
       type: String,
@@ -379,18 +410,17 @@ export default {
         startDate: [{ required: true, message: "开工时间", trigger: "blur" }],
         // endDate: [{ required: true, message: "完工时间", trigger: "blur" }],
       },
-      exportDialog:false,
-      exportParam:{productId: null, rangeDatas:this.getCurrentRangeTime()},
+      exportDialog: false,
+      exportParam: { productId: null, rangeDatas: this.getCurrentRangeTime() },
     };
   },
   computed: {},
   watch: {},
-  created() { },
   mounted() {
     console.log(this.planType, '费雷')
     this.getDepartmentList(),
       this.getPlanDeptSet(),
-      this.getHasSetPlanDeptList(),
+      // this.getHasSetPlanDeptList(),
       this.getProductList();
   },
   methods: {
@@ -459,6 +489,11 @@ export default {
           if (res.code == "ok") {
             let dptlist = JSON.parse(JSON.stringify(res.data));
             this.departmentList = this.changeArr(dptlist);
+            if(this.departmentList[0]) {
+              const { value, label } = this.departmentList[0]
+              this.currentDepartmentText = label
+              this.getTableData(value)
+            }
           } else {
             this.$message({
               message: res.msg,
@@ -474,6 +509,11 @@ export default {
         }
       );
     },
+    treeChange(item) {
+      const { value, label } = item
+      this.currentDepartmentText = label
+      this.getTableData(value)
+    },
     changeArr(arr) {
       for (var i = 0; i < arr.length; i++) {
         if (arr[i].id != -1 && arr[i].id != 0) {
@@ -493,14 +533,14 @@ export default {
     },
     // 日期
     getCurrentRangeTime() {
-        var _this = this;
-        let yy = new Date().getFullYear();
-        let mm = new Date().getMonth()+1;
-        let dd = new Date().getDate();
-        let time1 = yy + '-' + (mm < 10 ? '0' + mm : mm) + '-' + '01'
-        let time2 = yy + '-' + (mm < 10 ? '0' + mm : mm) + '-' + (dd < 10 ? '0' + dd : dd)
-        _this.gettime = [time1 , time2];
-        return  _this.gettime
+      var _this = this;
+      let yy = new Date().getFullYear();
+      let mm = new Date().getMonth() + 1;
+      let dd = new Date().getDate();
+      let time1 = yy + '-' + (mm < 10 ? '0' + mm : mm) + '-' + '01'
+      let time2 = yy + '-' + (mm < 10 ? '0' + mm : mm) + '-' + (dd < 10 ? '0' + dd : dd)
+      _this.gettime = [time1, time2];
+      return _this.gettime
     },
     deptSet() {
       console.log(
@@ -716,6 +756,7 @@ export default {
             steelStampNumberEnd: ''
           }
         ],
+        currentDepartmentText: ''
       }
     },
     addPlanData(formName) {
@@ -802,9 +843,9 @@ export default {
               steelStampNumber: JSON.stringify(steelStampNumberListArr)
             },
             (res) => {
-              this.todayPlanForm={
+              this.todayPlanForm = {
                 ...this.todayPlanForm,
-                steelStampNumberList:steelStampNumberListArr
+                steelStampNumberList: steelStampNumberListArr
               }
               if (res.code == "ok") {
                 this.$message({
@@ -962,10 +1003,10 @@ export default {
     exportData() {
       let param = {
         planType: this.planType,
-        startDate:this.exportParam.rangeDatas[0],
-        endDate:this.exportParam.rangeDatas[1],
+        startDate: this.exportParam.rangeDatas[0],
+        endDate: this.exportParam.rangeDatas[1],
         productId: this.exportParam.productId,
-        deptId: this.departmentIdArray[this.departmentIdArray.length-1]
+        deptId: this.departmentIdArray[this.departmentIdArray.length - 1]
       }
       this.http.post('/plan/exportData', param,
         res => {
@@ -1067,7 +1108,7 @@ export default {
     },
     //删除计划
     deletePlan(id) {
-      this.$alert('该计划将被删除','是否删除该计划', {
+      this.$alert('该计划将被删除', '是否删除该计划', {
         confirmButtonText: '确定',
         callback: action => {
           this.http.post(
@@ -1100,6 +1141,44 @@ export default {
       });
     },
   },
+  created() {
+    this.initDrag([
+      {
+        type: "LR",
+        domClass: {
+          // 中间分割线的名字
+          resize: "line-line",
+          // 左侧盒子的名字
+          left: "box-left",
+          // 右侧盒子的名字
+          right: "box-right",
+          // 父级的名字
+          box: "box-father",
+        },
+        otherInfo: {
+          // 限制左边栏最低宽度
+          leftWidth: 120,
+        },
+      },
+      {
+        type: "LR",
+        domClass: {
+          // 中间分割线的名字
+          resize: "line-second",
+          // 左侧盒子的名字
+          left: "left-laowang",
+          // 右侧盒子的名字
+          right: "box-second-father",
+          // 父级的名字
+          box: "grand",
+        },
+        otherInfo: {
+          // 限制左边栏最低宽度
+          leftWidth: 120,
+        },
+      },
+    ]);
+  },
 };
 </script>
 <style scoped lang='scss'>
@@ -1122,19 +1201,58 @@ export default {
   // flex-wrap: wrap;
   flex-direction: column;
   box-sizing: border-box;
-  padding: 10px;
 
   .layout-container-header,
   .layout-container-center,
   .layout-container-floor {
     width: 100%;
+    box-sizing: border-box;
+  }
+
+  .controls_btn {
+    display: flex;
+
+    div {
+      margin-right: 10px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  .layout-container-header {
+    padding: 10px 10px 0 10px;
+    background: #F2F2F2;
   }
 
   .layout-container-center {
+    width: 100%;
     flex: 1;
     display: flex;
-    flex-direction: column;
-    overflow: auto;
+    flex-direction: row;
+    height: 0;
+
+    .conterTable {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .line {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #f2f2f2;
+      cursor: w-resize;
+      width: 10px;
+
+      div {
+        line-height: 5px;
+        text-align: center;
+        color: rgb(151, 151, 151);
+      }
+    }
   }
 
   .layout-container-floor {
@@ -1252,6 +1370,52 @@ export default {
       }
     }
   }
-}
-</style>
+
+  .left-laowang {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    border-bottom: 1px solid #EBEEF5;
+
+    .left-laowangTree {
+      flex: 1;
+      overflow-y: auto;
+    }
+
+    .left-laowangText {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 48px;
+      border-bottom: 1px solid #EBEEF5;
+      color: #02A7F0;
+      box-sizing: border-box;
+      width: 100%;
+      padding: 0 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+    position: relative;
+    box-sizing: border-box;
+    width: 10%;
+
+    .spanWitdh {
+      box-sizing: border-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      line-height: 36px;
+      display: inline-block;
+    }
+  }
+}</style>