1

src/views/order/component/createDispatch.vue

@@ -1,6 +1,30 @@
 <template>
   <div>
     <div class="select">
+      <div class="date">
+        <el-date-picker
+          size="small"
+          v-model="date"
+          :type="createType === 1 ? 'date' : 'week'"
+          value-format="yyyy-MM-dd"
+          :picker-options="pickerOptions"
+          placeholder="日期选择"
+          :format="createType === 1 ? 'yyyy-MM-dd' : 'yyyy第WW周'"
+          style="width: 160px;"
+          @input="pickDate"
+        ></el-date-picker>
+        <p style="margin-left: 14px">
+          您正在为
+          <span style="color: red">{{ date }}</span>
+          创建
+          <span style="color: red;"> {{ abilities.find(i => i.value === ability) ? abilities.find(i => i.value === ability).key : '' }} </span>
+          调令
+        </p>
+        <!--        <el-radio-group size="small" style="margin-left: 14px;" v-model="createType">-->
+        <!--          <el-radio-button :label="1">天</el-radio-button>-->
+        <!--          <el-radio-button :label="2">周</el-radio-button>-->
+        <!--        </el-radio-group>-->
+      </div>
 
       <div class="select-item">
         <div class="select-item__title">选择范围</div>
@@ -34,34 +58,10 @@
           >清空筛选</Button
         >
       </div>
-
-      <div class="date">
-        <p>
-          您正在为
-          <span style="color: red">{{ date }}</span>
-          创建
-          <span style="color: red;"> {{ abilities.find(i => i.value === ability) ? abilities.find(i => i.value === ability).key : '' }} </span>
-          调令
-        </p>
-<!--        <el-radio-group size="small" style="margin-left: 14px;" v-model="createType">-->
-<!--          <el-radio-button :label="1">天</el-radio-button>-->
-<!--          <el-radio-button :label="2">周</el-radio-button>-->
-<!--        </el-radio-group>-->
-        <el-date-picker
-          size="small"
-          v-model="date"
-          :type="createType === 1 ? 'date' : 'week'"
-          value-format="yyyy-MM-dd"
-          :picker-options="pickerOptions"
-          placeholder="日期选择"
-          :format="createType === 1 ? 'yyyy-MM-dd' : 'yyyy第WW周'"
-          style="width: 160px; margin-left: 14px"
-          @input="pickDate"
-        ></el-date-picker>
-      </div>
     </div>
 
     <Table
+      style="margin-top: 20px"
       :columns="columns"
       :data="mergeData"
       stripe
@@ -71,6 +71,7 @@
     <div class="btns">
       <Button type="primary" @click="submit">创建调令</Button>
       <Button type="primary" ghost @click="reset">重置列表</Button>
+      <Button type="primary" ghost @click="clone">克隆模板</Button>
     </div>
   </div>
 </template>
@@ -88,6 +89,8 @@ export default {
   },
   data() {
     return {
+      dispatches: [],
+      transferDispatches: [],
       createType: 1,
       pickerOptions: {
         firstDayOfWeek: 1,
@@ -149,6 +152,68 @@ export default {
           render: (h, { row, index }) => {
             let text = row.equipment ? row.equipment.name : "";
             return h("div", [
+              h('el-popover',{
+                props: {
+                  title: "今日调令",
+                  width: "400px"
+                },
+                on: {
+                  show: _ => {
+                    this.transferDispatches = this.dispatches.filter(i => (i.equipment_id === row.equipment_id))
+                  }
+                }
+              },[
+                h('span',{
+                  slot: 'reference',
+                  // props: {
+                  //   type: "ios-list-box"
+                  // },
+                  style: {
+                    'border-radius': '100%',
+                    'margin-right': '4px',
+                    'cursor': 'pointer',
+                    'width': '20px',
+                    'height': '20px',
+                    'display': 'inline-block',
+                    'background': '#367bc7',
+                    'color': '#fff'
+                  }
+                },this.dispatches.reduce((pre,cur) => {
+                  return cur.equipment_id === row.equipment_id ? ++pre : pre
+                },0)),
+                h('Table',{
+                  style: {
+                    'width': "480px"
+                  },
+                  props: {
+                    size: "small",
+                    data: this.transferDispatches,
+                    columns: [
+                      {
+                        title: " ",
+                        type: "index",
+                        width: 46
+                      },
+                      {
+                        title: '开始时间',
+                        key: 'start_time',
+                        align: 'center',
+                        render:(h, { row }) => (h('span',this.$moment(row.start_time).format('YYYY-MM-DD HH:mm')))
+                      },
+                      {
+                        title: '结束时间',
+                        key: 'end_time',
+                        align: 'center',
+                        render:(h, { row }) => (h('span',this.$moment(row.end_time).format('YYYY-MM-DD HH:mm')))
+                      },
+                      {
+                        title: '内容',
+                        key: 'content'
+                      }
+                    ]
+                  }
+                })
+              ]),
               h('span',text),
               h('Button',{
                 props: {
@@ -216,11 +281,58 @@ export default {
                 format: "HH:mm"
               },
               on: {
-                ["on-change"]: (e) => (this.data[index].start_time = e),
+                ["on-change"]: (e) => {
+                  this.data[index].start_time = e
+
+                  if (this.data[index]._last) {
+                    const [hour,min] = this.data[index].start_time.split(':').map(i => Number(i))
+                    let addTime = {
+                      hour: Math.floor(this.data[index]._last),
+                      min: (this.data[index]._last % 1) * 60
+                    }
+                    let resTime = {
+                      hour: hour + addTime.hour + ((min + addTime.min) >= 60 ? 1 : 0),
+                      min: (min + addTime.min) % 60
+                    }
+                    this.data[index].end_time = `${resTime.hour}:${resTime.min}`
+                  }
+                },
               },
             });
           },
         },
+        {
+          title: "持续时间（时）",
+          width: 140,
+          align: "center",
+          key: "last",
+          render: (h,{ row, index }) => {
+            return h('InputNumber',{
+              props: {
+                value: 0,
+                min: 0,
+                step: 0.5,
+                size: "small",
+                precision: 1
+              },
+              on: {
+                ['on-change']:e => {
+                  this.data[index]._last = e
+                  const [hour,min] = this.data[index].start_time.split(':').map(i => Number(i))
+                  let addTime = {
+                    hour: Math.floor(e),
+                    min: (e % 1) * 60
+                  }
+                  let resTime = {
+                    hour: hour + addTime.hour + ((min + addTime.min) >= 60 ? 1 : 0),
+                    min: (min + addTime.min) % 60
+                  }
+                  this.data[index].end_time = `${resTime.hour}:${resTime.min}`
+                }
+              }
+            })
+          }
+        },
         {
           title: "结束时间",
           width: 140,
@@ -339,6 +451,29 @@ export default {
     };
   },
   methods: {
+    clone () {
+      let verify = true;
+      const submitData = this.data.filter(i => (i.start_time || i.end_time || i.content));
+      submitData.forEach(item => {
+        if (!item.start_time || !item.end_time || !item.level) {
+          verify = false;
+        }
+      })
+      if (!verify) {
+        this.$message({
+          type: 'warning',
+          message: '请填写完整信息'
+        })
+        return
+      }
+      submitData.forEach(i => {
+        delete i['equipment_id-span']
+        delete i['_index']
+        delete i['_rowKey']
+      })
+      console.log(JSON.stringify(submitData))
+    },
+
     clear () {
       this.select = {
         area: [],
@@ -498,7 +633,7 @@ export default {
     },
     equipmentList() {
       return this.equipments() || [];
-    },
+    }
   },
   watch: {
     equipmentList(val) {
@@ -551,10 +686,14 @@ export default {
   },
   mounted() {},
   created() {
+    this.$bus.$on("getDispatches", dispatches => (this.dispatches = dispatches))
     this.getArea();
     this.getType();
     this.getAbility();
   },
+  destroyed() {
+    this.$bus.$off("getDispatches")
+  }
 };
 </script>
 

src/views/order/component/dispatchList.vue

@@ -214,6 +214,8 @@ export default {
         this.data = res.data;
         this.total = res.total;
         this.loading = false;
+
+        this.$bus.$emit('getDispatches', this.data)
       } catch (e) {
         this.loading = false;
       }