更改样式

src/views/pm/mtask2.vue

@@ -1,13 +1,13 @@
 <template>
   <el-container style="flex-direction: column">
-    <el-main class="nopadding" style="position: relative;height: 50%;margin-bottom: 20px;">
+    <el-main id="topContainer" class="nopadding" style="position: relative;margin-bottom: 10px;">
       <div class="right-panel" style=" display: inline-block;position: absolute;right: 20px;margin-top: 4px;z-index: 100">
         <el-button type="primary" icon="el-icon-plus" @click="add">新增</el-button>
         <el-button type="primary" icon="el-icon-plus" @click="mtaskAssgin">任务下达</el-button>
       </div>
       <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="粗加工6车间" name="first">
-          <scTable ref="table1" :apiObj="apiMtask" row-key="id" stripe :params="paramsMtask" hidePagination>
+          <scTable ref="table1" :apiObj="apiMtask" row-key="id" stripe :params="paramsMtask" :height="tableHeight" @selection-change="handleSelectionChange" hidePagination>
             <el-table-column type="selection" width="55" />
             <el-table-column type="index" width="50" />
             <el-table-column label="任务编号" prop="number">
@@ -38,11 +38,11 @@
             </el-table-column> -->
             <el-table-column label="操作" fixed="right" align="left" width="120">
               <template #default="scope">
-                <el-link type="primary" @click="table_edit(scope.row)" v-auth="'equipment.update'">
+                <el-link type="primary" @click="table_edit(scope.row)">
                   编辑
                 </el-link>
                 <el-divider direction="vertical"></el-divider>
-                <el-link type="danger" @click="table_del(scope.row)" v-auth="'equipment.delete'">
+                <el-link type="danger" @click="table_del(scope.row)">
                   删除
                 </el-link>
               </template>
@@ -59,7 +59,7 @@
       </div>
       <el-tabs v-model="activeNameSub" class="demo-tabs" @tab-click="handleClick">
         <el-tab-pane label="订单排产" name="order">
-          <scTable ref="table2" :apiObj="apiOrderItem" row-key="id" stripe :params="paramsOrderItem" hidePagination>
+          <scTable ref="table2" :apiObj="apiOrderItem" row-key="id" stripe :height="tableHeight" :params="paramsOrderItem" hidePagination>
             <el-table-column type="selection" width="55" />
             <el-table-column label="订单编号" prop="number">
               <template #default="scope">
@@ -86,10 +86,7 @@
           </scTable>
         </el-tab-pane>
         <el-tab-pane label="生产进度" name="rate">
-          <div class="ganntClass" :style="{ height: ganttHeight }" v-loading="ganttLoading">
+          <GanttComponent class="left-container" :tasks="tasks"></GanttComponent>
-            <div ref="gantt" class="gantt-container"></div>
-          </div>
-          <!-- <vue-gantt :tasks="tasks" :timerange="timeRange"></vue-gantt> -->
         </el-tab-pane>
       </el-tabs>
     </el-main>
@@ -106,7 +103,7 @@ import saveDialog from "./mtask_form.vue";
 export default {
   name: "rparty",
   components: {
-    saveDialog
+    saveDialog,GanttComponent
   },
   data() {
     return {
@@ -119,30 +116,7 @@ export default {
       ganttLoading: false,
       projectId: '',
       orderitems: [],
-      tasks: {
+      
-        data: []
-      },
-      gantttt: {
-        data: [],
-        links: [
-          { id: 1, source: 1, target: 3, type: "0" },
-          { id: 2, source: 12323545, target: 12345453, type: "1" },
-          { id: 3, source: 12345453, target: 12345437, type: "0" }
-        ],
-        columns: [
-          {
-            align: 'right', name: 'color', label: '', width: '15',
-            template: function (task) {
-              if (task.color) {
-                return "<div class='tttttt' style='background:" + task.color + "'>" + "</div>"
-              }
-            }
-          },
-          { align: 'left', name: 'text', label: '', tree: true, width: "*", min_width: 120 },
-          { align: 'center', name: 'person', label: '负责人', width: '100' },
-          { align: 'right', name: 'time', label: '时间节点', width: '80' },
-        ],
-      },
 
       dialog: {
         save: false,
@@ -150,21 +124,39 @@ export default {
       apiMtask: this.$API.pm.mtask.list,
       apiOrderItem: this.$API.sam.orderitem.list,
       paramsOrderItem: { mtask__isnull: true },
-      paramsMtask: { parent__isnull: true, mgroup__belong_dept__name: '6车间' },
+      paramsMtask2: { parent__isnull: true, mgroup__belong_dept__name: '6车间', material_out__is_hidden: false },
+      paramsMtask: { mgroup__belong_dept__name: '6车间'},
       query: {
         page: 1,
         page_size: 20,
         date: ''
       },
+      tableHeight:null,
       activeName: 'first',
       activeNameSub: 'order',
-      selection: [],
+      selectedId:[],
+      selectedIds:[],
       state_: {
         10: '完好',
         20: '限用',
         30: '在修',
         40: '禁用',
       },
+      tasks: {
+        data: [
+          {number:'GZ20231012',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-12",id:'2023101800',duration: 2,progress: 1},
+          {number:'GZ20231013',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-13",id:'2023101801',duration: 1,progress: 1},
+          {number:'GZ20231014',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-14",id:'2023101802',duration: 1,progress: 0.8},
+          {number:'GZ20231015',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-15",id:'2023101803',duration: 1,progress: 0.6},
+          {number:'GZ20231016',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-16",id:'2023101804',duration: 1,progress: 0.4},
+          {number:'GZ20231017',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-17",id:'2023101805',duration: 1,progress: 0.2},
+          {number:'GZ20231018',model:'GB2',cate:'100*50*2',count:300,text: "一天任务",start_date: "2023-10-18",id:'2023101806',duration: 1,progress: 1},
+          {number:'GZ20231018',model:'GB2',cate:'100*50*2',count:200, text: "一天任务",start_date: "2023-10-19",id:'2023101807',duration: 1,progress: 0.8},
+          {number:'GZ20231020',model:'ZB2',cate:'100*50*2',count:100, text: "一天任务", start_date: "2023-10-20",id:'2023101808',duration: 1,progress: 0.6},
+          {number:'GZ20231021',model:'GB2',cate:'100*50*2',count:50, text: "一天任务", start_date: "2023-10-21",id:'2023101809',duration: 1,progress: 0.4},
+          {number:'GZ20231022',model:'GB2',cate:'100*50*2',count:0, text: "一天任务", start_date: "2023-10-22",id:'20231018010',duration: 1,progress: 0.2},
+        ]
+      },
     };
   },
   created() {
@@ -172,126 +164,37 @@ export default {
     gantt.clearAll();
   },
   mounted() {
-    var $this = this;
+    let heights = document.getElementById('topContainer').clientHeight;
-    //本地化
+    console.log('heights',heights)
-    gantt.i18n.setLocale('cn');
+    this.tableHeight = (heights-50)+'px';
-    //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
-    gantt.config.autosize = false;
-    //只读模式：打开后不可以操作甘特图
-    gantt.config.readonly = false;
-    //是否显示左侧树表格
-    gantt.config.show_grid = true;
-    //表格列设置：我们在后台获取数据后，会解析到这个表格列中，这里面会含有很多隐藏列，作用是甘特图中不需要看隐藏列，但当我们获取甘特图的任务时，这些隐藏列会跟随任务方便使用
-    gantt.config.columns = [
-      {
-        name: 'text', label: '分项工程',
-        tree: true, width: '*', align: 'left', template: function (obj) { return `<span class="gantt-name-box" title="${obj.text}">${obj.text}</span>` }
-      },
-      { name: 'beginTime', label: '开始日期', width: '100', align: 'center', template: function (obj) { return obj.beginTime; } },
-      { name: 'endTime', label: '结束日期', width: '100', align: 'center', template: function (obj) { return obj.endTime; } },
-      {
-        name: 'limitTime', label: '工期', width: '100', align: 'center', template: function (obj) { return `${obj.limitTime}天`; }
-      }
-    ];
-    gantt.config.data = [
-      { "id": "1635835705701744641", "text": "345分项工程分项工程分项工程", "start_date": "2022-12-01", "beginTime": "2022-12-01", "endTime": "2023-03-14", "limitTime": 103, "duration": 103, "progress": 1 },
-      { "id": "1635835705701744642", "text": "111", "start_date": "2023-03-14", "beginTime": "2023-03-14", "endTime": "2023-03-17", "limitTime": 3, "duration": 3, "progress": 1 },
-      { "id": "1635835705701744643", "text": "分项工程", "start_date": "2023-03-13", "beginTime": "2023-03-13", "endTime": "2023-03-23", "limitTime": 10, "duration": 10, "progress": 1 },
-      { "id": "1635835705701744644", "text": "分项工程1", "start_date": "2023-03-30", "beginTime": "2023-03-30", "endTime": "2023-04-20", "limitTime": 21, "duration": 21, "progress": 1 },
-      { "id": "1635835705701744645", "text": "分项工程2", "start_date": "2023-03-21", "beginTime": "2023-03-21", "endTime": "2023-03-29", "limitTime": 8, "duration": 8, "progress": 1 },
-      { "id": "1635835705701744646", "text": "分项工程3", "start_date": "2023-03-23", "beginTime": "2023-03-23", "endTime": "2023-03-31", "limitTime": 8, "duration": 8, "progress": 1 },
-      { "id": "1635835705701744647", "text": "6", "start_date": "2023-03-29", "beginTime": "2023-03-29", "endTime": "2023-03-30", "limitTime": 1, "duration": 1, "progress": 1 },
-      { "id": "1635835705701744648", "text": "1", "start_date": "2023-03-16", "beginTime": "2023-03-16", "endTime": "2023-03-17", "limitTime": 1, "duration": 1, "progress": 1 },
-    ];
-    //自适应
-    //gantt.config.fit_tasks = true;
-    gantt.config.row_height = 44;
-    //表头高度
-    gantt.config.scale_height = 50;
-
-    //开启提示：鼠标悬浮在gantt行上显示
-    gantt.plugins({
-      tooltip: true
-    });
-
-    //时间轴格式化模版
-    var yearScaleTemplate = function (date) {
-      return date.getFullYear();
-    };
-    var monthScaleTemplate = function (date) {
-      var month = date.getMonth() + 1;
-      return month;
-    };
-    var dayScaleTemplate = function (date) {
-      var month = date.getDate();
-      return month;
-    };
-    //时间轴样式
-    var yearScaleCss = function () {
-      return 'yearScaleStyle';
-    };
-    var monthScaleCss = function () {
-      return 'monthScaleStyle';
-    };
-    var monthScaleCss = function () {
-      return 'monthScaleStyle';
-    };
-    gantt.config.start_date = new Date(2023, 9, 1);
-    gantt.config.end_date = new Date(2023, 9, 20);
-    gantt.config.scales = [
-      { unit: 'year', step: 1, format: yearScaleTemplate, css: yearScaleCss },
-      { unit: 'month', step: 1, format: monthScaleTemplate, css: monthScaleCss },
-      { unit: 'day', step: 1, format: dayScaleTemplate, css: monthScaleCss }
-    ];
-
-    gantt.attachEvent('onGanttReady', function () {
-      var tooltips = gantt.ext.tooltips;
-      gantt.templates.tooltip_text = function (start, end, task) {
-        return '任务编号：' + task.no + '<br/>Task：' + task.text + '<br/>Role：' + task.roleName + '<br/>Owner：' + task.ownerName + '<br/>计划开始时间：' + gantt.templates.tooltip_date_format(start) + '<br/>RCD：' + gantt.templates.tooltip_date_format(end);
-      };
-    });
-
-    //禁用双击事件
-    gantt.config.details_on_dblclick = false;
-    //关闭所有错误提示信息：gantt有自己的异常消息，如果不关闭可能页面会弹出异常消息
-    gantt.config.show_errors = false;
-    //禁止拖动设置任务长度
-    gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
-      return false;
-    });
-    //禁止拖动任务
-    gantt.config.drag_move = false;
-    //禁止拖动任务进度
-    gantt.config.drag_progress = false;
-    //禁止拖放添加Link
-    gantt.config.drag_links = false;
-
-    //开启标记
-    gantt.plugins({
-      marker: true
-    });
-
-    //标记当前日期
-    var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
-    var markerId = gantt.addMarker({
-      start_date: new Date(),
-      css: 'today',	//标记样式，style中对应
-      text: 'Today',
-      title: dateToStr(new Date())
-    });
-    gantt.getMarker(markerId);
-
-    // 初始化
-    gantt.init(this.$refs.gantt);
   },
   methods: {
+    handleSelectionChange(selection){
+      this.selectedIds = [];
+      selection.forEach(item => {
+        this.selectedIds.push(item.id)
+      });
+    },
     mtaskAssgin(){
-      let rows = this.$refs.table1.getSelectionRows()
+      if(this.selectedIds.length>0){
-      if (rows.length == 0) {
+
+      }else{
         this.$message.error('未选择任何任务')
-        return
       }
     },
+    selectionChange(selection){
+      this.selectedId = [];
+      selection.forEach(item => {
+        this.selectedId.push(item.id)
+      });
+    },
+    // mtaskAssgin() {
+    //   let rows = this.$refs.table1.getSelectionRows()
+    //   if (rows.length == 0) {
+    //     this.$message.error('未选择任何任务')
+    //     return
+    //   }
+    // },
     startPlan() {
       let rows = this.$refs.table2.getSelectionRows()
       if (rows.length == 0) {
@@ -388,7 +291,7 @@ export default {
 </script>
 <style scoped>
 .el-main.nopadding {
-  padding: 0 20px 20px 20px
+  padding: 0 20px 0 20px
 }