2023-11-16 xy

src/utils/mergeTableRow.js

@@ -0,0 +1,62 @@
+/**在工具类util.js中定义通用方法
+ *  table合并行通用 */
+// eslint-disable-next-line space-before-function-paren
+export function mergeTableRow (config) {
+  let data = config.data;
+  const {
+    mergeColNames, // 需要合并的列
+    firstMergeColNames, // 受影响的列
+    firstMerge // 以哪列为基础进行合并(基准列)
+  } = config
+  if (!mergeColNames || mergeColNames.length === 0) {
+    return data
+  }
+  mergeColNames.forEach((m) => {
+    const mList = {}
+    data = data.map((v, index) => {
+      // 区分需要合并行的key值
+      const rowVal = v[firstMerge] + '-' + v[m]
+      // 需要合并行的第二行以及之后行会走if
+      // m === firstMerge 判断需要合并的列是否是基准列，如果是则只满足前面的条件，如果不是则需满足前面+后面的条件
+      if (mList[rowVal] && mList[rowVal].newIndex === index && (m === firstMerge ? true : data[index][firstMerge + '-span'].rowspan === 0)) {
+        // 判断受影响的列是否是需要合并的列
+        const flag = firstMergeColNames.filter((f) => {
+          return f === m
+        }).length !== 0
+        // 判断需要合并的列是否是基准列
+        const mcFlag = mergeColNames.filter((mc) => {
+          return mc === firstMerge
+        }).length === 0
+        // 判断基准列只有一行的时候，直接赋值rowspan和colspan为1
+        if ((mcFlag && flag) || (flag && data[index][firstMerge + '-span'] && data[index][firstMerge + '-span'].rowspan === 1)) {
+          v[m + '-span'] = {
+            rowspan: 1,
+            colspan: 1
+          }
+        } else {
+          // 判断基准列或其他需要合并列有多行时，第一行rowspan++
+          data[mList[rowVal]['index']][m + '-span'].rowspan++
+          // 需要合并行除了第一行之后其他行设置rowspan和colspan为0
+          v[m + '-span'] = {
+            rowspan: 0,
+            colspan: 0
+          }
+          mList[rowVal]['num']++
+          mList[rowVal]['newIndex']++
+        }
+      } else { // 需要合并列第一行走else
+        mList[rowVal] = {
+          num: 1,
+          index: index,
+          newIndex: index + 1
+        }
+        v[m + '-span'] = {
+          rowspan: 1,
+          colspan: 1
+        }
+      }
+      return v
+    })
+  })
+  return data
+}

src/views/order/component/normalCreate.vue

@@ -21,26 +21,108 @@
       <Divider></Divider>
 
       <div class="content">
-        <step1 v-if="currentStep === 0"></step1>
+        <step1 v-if="currentStep === 0" :original-data="data" @next="handleNext"></step1>
+        <step2 v-if="currentStep === 1" :original-data="data" @next="handleNext" @forward="handleForward"></step2>
+        <step3 v-if="currentStep === 2" :original-data="data" @next="handleNext" @forward="handleForward"></step3>
+
+        <div v-if="currentStep === 3" class="complete">
+          <Icon class="complete__icon" type="ios-checkmark-circle" />
+
+          <p>完成</p>
+
+          <Button style="width: 180px;" type="primary" @click="$router.push('/dispatch/list')">查看调令</Button>
+        </div>
       </div>
     </Card>
   </div>
 </template>
 
 <script>
+import { save } from "@/api/system/baseForm";
+import { uuid } from "@/utils";
+
 import LxHeader from "@/components/LxHeader/index.vue";
 import step1 from "@/views/order/component/step1.vue";
+import step2 from "@/views/order/component/step2.vue";
+import step3 from "@/views/order/component/step3.vue";
 export default {
   components: {
     LxHeader,
-    step1
+    step1,
+    step2,
+    step3
   },
   data() {
     return {
       currentStep: 0,
+
+      data: []
+    }
+  },
+  methods: {
+    handleNext ({ data, step }) {
+      console.log(data,step)
+      switch (step) {
+        case 1:
+          let uid = uuid();
+          this.data = data.map(equipmentId => {
+            return {
+              no: uid,
+              equipment_id: equipmentId,
+              start_time: '',
+              end_time: '',
+              content: '',
+              level: 1,
+              status: 1
+            }
+          })
+          this.currentStep = 1;
+          break;
+        case 2:
+          this.data = data;
+          this.currentStep = 2;
+          break;
+        case 3:
+          let promiseAll = this.data.map(i => {
+            delete i['equipment_id-span']
+            delete i['_index']
+            delete i['_rowKey']
+            i.start_time = `${this.$moment().format('YYYY-MM-DD')} ${i.start_time}`;
+            i.end_time = `${this.$moment().format('YYYY-MM-DD')} ${i.end_time}`;
+
+            return save({
+              table_name: 'transfers',
+              ...i
+            },false)
+          })
+          let loadingInstance = this.$loading({
+            lock:true,
+            background:"rgba(0,0,0,0.4)",
+            text:"正在加载中..."
+          })
+          Promise.all(promiseAll).then(res => {
+            this.data = [];
+            loadingInstance.close();
+            this.currentStep = 3;
+          }).catch(_ => {
+            loadingInstance.close();
+          })
+          break;
+      }
+    },
+
+    handleForward ({ data, step }) {
+      switch (step) {
+        case 2:
+          this.data = data;
+          this.currentStep = 0;
+          break;
+        case 3:
+          this.currentStep = 1;
+          break;
+      }
     }
   },
-  methods: {},
   computed: {},
 }
 </script>
@@ -55,4 +137,24 @@ export default {
 
   margin: 0 auto;
 }
+
+.complete {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  padding-bottom: 20px;
+  &__icon {
+    color: green;
+    font-size: 66px;
+  }
+
+  & > p {
+    font-weight: 600;
+    color: #333;
+    font-size: 20px;
+
+    padding: 20px 0;
+  }
+}
 </style>

src/views/order/component/step1.vue

@@ -22,9 +22,15 @@
 
     <Divider></Divider>
 
-    <el-transfer v-model="pickedEquipments" :data="equipments()" :titles="['源列表','目标列表']" :props="{ key: 'id',label: 'name' }" :right-default-checked="pickedEquipments"></el-transfer>
+    <el-transfer class="flex-center" v-model="pickedEquipments" :data="equipmentList" :titles="['源列表','目标列表']" :props="{ key: 'id',label: 'name' }" :right-default-checked="pickedEquipments">
+      <template #default="{ option }">
+        <div>{{ area(option.area) }} {{ type(option.type) }} {{ option.name }}</div>
+      </template>
+    </el-transfer>
 
-    <Button style="width: 200px;" type="primary">下一步</Button>
+    <div class="flex-center" style="margin-top: 20px;">
+      <Button style="width: 200px;" type="primary" @click="nextStep">下一步</Button>
+    </div>
   </div>
 </template>
 
@@ -32,19 +38,30 @@
 import { show } from "@/api/system/customFormField";
 export default {
   inject: ['equipments'],
+  props: {
+    originalData: Array
+  },
   data() {
     return {
       areas: [],
       types: [],
       select: {
-        area: '',
-        type: ''
+        area: [],
+        type: []
       },
 
       pickedEquipments: [],
     }
   },
   methods: {
+    nextStep () {
+      this.$emit('next',{
+        data: this.pickedEquipments,
+        step: 1
+      })
+    },
+
+
     async getArea () {
       const obj = (await show({ id: 4 },false))?.select_item;
       if (obj && typeof obj === 'object') {
@@ -79,7 +96,43 @@ export default {
       }
     },
   },
-  computed: {},
+  computed: {
+    area () {
+      return function (id) {
+        return this.areas.find(i => i.value === id)?.key
+      }
+    },
+
+    type () {
+      return function (id) {
+        return this.types.find(i => i.value === id)?.key
+      }
+    },
+
+    equipmentList () {
+      if (this.select.area.length > 0 || this.select.type.length > 0) {
+        let list1 = [];
+        let list2 = [];
+        if (this.select.area.length > 0) {
+          list1 = this.equipments().filter(i => this.select.area.find(j => j === i.id))
+        }
+        if (this.select.type.length > 0) {
+          list2 = this.equipments().filter(i => this.select.type.find(j => j === i.id))
+        }
+        return Array.from(new Set([...list1,...list2].map(JSON.stringify))).map(JSON.parse);
+      } else {
+        return this.equipments();
+      }
+    }
+  },
+  watch: {
+    originalData: {
+      handler: function (val) {
+        this.pickedEquipments = Array.from(new Set(val.map(i => i.equipment_id)))
+      },
+      immediate: true
+    }
+  },
   created() {
     this.getArea();
     this.getType();
@@ -88,4 +141,26 @@ export default {
 </script>
 
 <style scoped lang="scss">
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.select {
+  &-item {
+    &__title {
+      font-weight: 600;
+
+      padding: 8px 0;
+    }
+
+    & + & {
+      margin-top: 10px;
+    }
+  }
+}
+
+::v-deep .el-transfer-panel {
+  min-width: 260px;
+}
 </style>

src/views/order/component/step2.vue

@@ -0,0 +1,295 @@
+<template>
+  <div>
+    <Table :columns="columns" :data="mergeData" stripe :span-method="objectSpanMethod"></Table>
+
+    <div class="flex-center" style="margin-top: 20px;">
+      <Button style="width: 200px;" type="primary" @click="forwardStep">上一步</Button>
+      <Button style="width: 200px;" type="primary" @click="nextStep">下一步</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { index } from "@/api/system/baseForm";
+import { deepCopy } from "@/utils";
+import { mergeTableRow } from "@/utils/mergeTableRow";
+export default {
+  inject: ['equipments'],
+  props: {
+    originalData: Array
+  },
+  data() {
+    return {
+      weather: [],
+      copyOriginalData: [],
+      data: [],
+      columns: [
+        // {
+        //   width: 50,
+        //   title: ' ',
+        //   type: 'index',
+        //   key: 'index'
+        // },
+        {
+          title: '点位',
+          width: 240,
+          key: 'equipment_id',
+          align: 'center',
+          render: (h,{ row, index }) => {
+            return h('div',{
+              style: {
+                display: 'flex',
+                'justify-content': 'space-between'
+              }
+            },[
+              h('Select',{
+                style: {
+                  width: '140px'
+                },
+                props: {
+                  value: row.equipment_id,
+                  filterable: true,
+                  size: 'small',
+                  transfer: true,
+                  disabled: true
+                },
+                on: {
+                  ['on-select']:e => {
+                    row.equipment_id = e.value;
+                  }
+                }
+              },this.equipments().map(i => {
+                return h('Option',{
+                  props: {
+                    value: i.id,
+                  }
+                },i.name)
+              })),
+              h('Button',{
+                props: {
+                  size: 'small',
+                  type: 'primary'
+                },
+                on: {
+                  ['click']:e => {
+                    this.data.splice(index,0,deepCopy(row))
+                  }
+                }
+              },'新增')
+            ])
+          }
+        },
+        {
+          title: '开启时间',
+          width: 140,
+          align: 'center',
+          key: 'start_time',
+          render: (h,{ row, index }) => {
+            return h('TimePicker',{
+              props: {
+                value: row.start_time,
+                type: 'time',
+                size: 'small',
+                transfer: true
+              },
+              on: {
+                ['on-change']:e => this.data[index].start_time = e
+              }
+            })
+          }
+        },
+        {
+          title: '结束时间',
+          width: 140,
+          align: 'center',
+          key: 'end_time',
+          render: (h,{ row, index }) => {
+            return h('TimePicker',{
+              props: {
+                value: row.end_time,
+                type: 'time',
+                size: 'small',
+                transfer: true
+              },
+              on: {
+                ['on-change']:e => this.data[index].end_time = e
+              }
+            })
+          }
+        },
+        {
+          title: '调令内容',
+          minWidth: 200,
+          key: 'content',
+          align: 'center',
+          render: (h,{ row, index }) => {
+            return h('Input',{
+              style: {
+                'padding': '6px 0'
+              },
+              props: {
+                size: 'small',
+                value: row.content,
+                type: 'textarea'
+              },
+              on: {
+                ['input']:e => this.data[index].content = e
+              }
+            })
+          }
+        },
+        {
+          title: '调令等级',
+          width: 140,
+          key: 'level',
+          align: 'center',
+          render: (h,{ row }) => {
+            return h('Select',{
+              props: {
+                value: row.level,
+                filterable: true,
+                size: 'small',
+                transfer: true,
+              },
+              on: {
+                ['on-select']:e => {
+                  row.level = e.value;
+                }
+              }
+            },[{ label: '一般',value: 1 },{ label: '紧急',value: 2 }].map(i => {
+              return h('Option',{
+                props: {
+                  value: i.value,
+                }
+              },i.label)
+            }))
+          }
+        },
+        {
+          title: '操作',
+          width: 140,
+          key: 'operate',
+          render: (h,{ row, index }) => {
+            return h('Poptip',{
+              props: {
+                title: '确认要删除吗？',
+                confirm: true,
+                transfer: true
+              },
+              on: {
+                ['on-ok']:e => {
+                  this.data.splice(index,1)
+                }
+              }
+            },[
+              h('Button',{
+                props: {
+                  type: 'primary',
+                  size: 'small'
+                }
+              },'删除')
+            ])
+          }
+        }
+      ],
+    }
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      const span = column["key"] + "-span";
+      if (row[span]) {
+        return row[span];
+      }
+    },
+
+    forwardStep () {
+      this.$emit('forward',{
+        data: this.copyOriginalData,
+        step: 2
+      })
+    },
+
+    nextStep () {
+      let verify = true;
+      this.data.forEach(item => {
+        if (!item.start_time || !item.end_time || !item.level) {
+          verify = false;
+        }
+      })
+      if (!verify) {
+        this.$message({
+          type: 'warning',
+          message: '请填写完整信息'
+        })
+        return
+      }
+      this.$emit('next',{
+        data: this.data,
+        step: 2
+      })
+    },
+
+    async getWeather () {
+      this.weather = (await index({
+        table_name: 'waters',
+        filter: [
+          {
+            key: 'date',
+            op: 'eq',
+            value: this.$moment().format('YYYY-MM-DD')
+          }
+        ]
+      },false)).data
+      console.log(this.weather)
+    }
+  },
+  computed: {
+    mergeData () {
+      return mergeTableRow({
+        data: this.data.map(i => {
+          delete i['equipment_id-span'];
+          return i;
+        }),
+        mergeColNames: ["equipment_id"], // 需要合并的列，默认合并列相同的数据
+        firstMergeColNames: ["equipment_id"], // 受影响的列，只合并以firstMerge为首的同类型数据
+        firstMerge: 'equipment_id' // 以哪列为基础进行合并，一般为第一列
+      })
+    },
+  },
+  watch: {
+    originalData: {
+      handler: function (val) {
+        this.copyOriginalData = deepCopy(val);
+        this.data = deepCopy(val);
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.getWeather().then(res => {
+      this.$Notice.info({
+        title: '今日水情',
+        duration: 3,
+        render: h => {
+          return h('div',[
+            h('br'),
+            h('div',this.weather.map(i => h('p',i.weather))),
+            h('br'),
+            h('p',{ class: 'ivu-notice-title' },'水情信息'),
+            h('br'),
+            h('div',this.weather.map(i => h('p',i.water)))
+          ])
+        }
+      });
+    })
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/order/component/step3.vue

@@ -0,0 +1,133 @@
+<template>
+  <div>
+    <Table :columns="columns" :data="originalData" stripe :span-method="objectSpanMethod"></Table>
+
+    <div class="flex-center" style="margin-top: 20px;">
+      <Button style="width: 200px;" type="primary" @click="forwardStep">上一步</Button>
+      <Button style="width: 200px;" type="primary" @click="nextStep">保 存</Button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  inject: ['equipments'],
+  props: {
+    originalData: Array
+  },
+  data() {
+    return {
+      columns: [
+        // {
+        //   width: 50,
+        //   title: ' ',
+        //   type: 'index',
+        //   key: 'index'
+        // },
+        {
+          title: '点位',
+          width: 230,
+          key: 'equipment_id',
+          align: 'center',
+          render: (h,{ row, index }) => {
+            let equipment = this.equipmentList.find(i => i.id === row.equipment_id);
+            let text = equipment ? equipment.name : '';
+            return h('span',text)
+          }
+        },
+        {
+          title: '开启时间',
+          width: 140,
+          align: 'center',
+          key: 'start_time',
+          render: (h,{ row, index }) => {
+            return h('TimePicker',{
+              props: {
+                value: row.start_time,
+                type: 'time',
+                size: 'small',
+                transfer: true,
+                readonly: true
+              }
+            })
+          }
+        },
+        {
+          title: '结束时间',
+          width: 140,
+          align: 'center',
+          key: 'end_time',
+          render: (h,{ row, index }) => {
+            return h('TimePicker',{
+              props: {
+                value: row.end_time,
+                type: 'time',
+                size: 'small',
+                transfer: true,
+                readonly: true
+              }
+            })
+          }
+        },
+        {
+          title: '调令内容',
+          minWidth: 200,
+          key: 'content',
+          align: 'center',
+          render: (h,{ row }) => {
+            return h('div',{
+              style: {
+                'text-align': 'left'
+              }
+            },row.content)
+          }
+        },
+        {
+          title: '调令等级',
+          width: 120,
+          key: 'level',
+          render: (h,{ row }) => {
+            let map = new Map([
+              [1,'一般'],
+              [2,'紧急']
+            ])
+            return h('span',map.get(row.level))
+          }
+        }
+      ]
+    }
+  },
+  methods: {
+    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
+      const span = column["key"] + "-span";
+      if (row[span]) {
+        return row[span];
+      }
+    },
+
+    forwardStep () {
+      this.$emit('forward',{
+        step: 3
+      })
+    },
+    nextStep () {
+     this.$emit('next',{
+       step: 3
+     })
+    }
+  },
+  computed: {
+    equipmentList () {
+      return this.equipments();
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>