water-dispatch-web/src/views/order/component/adjust.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :is-show.sync="isShow"
      type="form"
      title="调令调整"
      :form="form"
      :rules="rules"
      @submit="submit"
    >
      <template #extraFormTop>
        <el-descriptions title="调令信息" :column="2" label-class-name="xy-table-item-label">
          <el-descriptions-item label="点位">{{ detail.equipment_id_equipments_id_relation ? detail.equipment_id_equipments_id_relation.name : "" }}</el-descriptions-item>
          <el-descriptions-item label="闸门总数">{{ detail.equipment_id_equipments_id_relation ? detail.equipment_id_equipments_id_relation.bengzhashuliang : "" }}</el-descriptions-item>
          <el-descriptions-item label="水泵总数">{{ detail.equipment_id_equipments_id_relation ? detail.equipment_id_equipments_id_relation.shuibengtaishu : "" }}</el-descriptions-item>
          <el-descriptions-item label="开启闸门数量">{{ detail.kaiqishuliang }}</el-descriptions-item>
          <el-descriptions-item label="开启水泵数量">{{ detail.kaiqishuliang1 }}</el-descriptions-item>
          <el-descriptions-item label="开始时间">{{ $moment(detail.start_time).format("HH:mm") }}</el-descriptions-item>
          <el-descriptions-item label="结束时间">{{ $moment(detail.end_time).format("HH:mm") }}</el-descriptions-item>
          <el-descriptions-item label="类型">
            <el-tag size="small">{{ myleibie }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="范围">
            <el-tag size="small">{{ myarea }}</el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template v-slot:content>
        <div class="xy-table-item">
          <div class="xy-table-item-label">调令内容 ：</div>
          <div class="xy-table-item-content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              v-model="form.content"
              clearable
              placeholder="请输入调令内容"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:tiaozhengleixing>
        <div class="xy-table-item">
          <div class="xy-table-item-label">调整类型 ：</div>
          <div class="xy-table-item-content">
            <div style="width: 300px">
              <el-radio-group v-model="adjustEquipmentType" @change="temp++">
                <el-radio :label="1">水泵</el-radio>
                <el-radio :label="2">闸门</el-radio>
              </el-radio-group>
              <el-select
                :popper-append-to-body="false"
                v-model="form.tiaozhengleixing"
                clearable
                placeholder="请选择调整类型"
                @change="temp++"
              >
                <el-option
                  v-for="item in types"
                  :key="item.id"
                  :label="item.value"
                  :value="item.id"
                ></el-option>
              </el-select>
            </div>
          </div>
        </div>
      </template>
      <template #kaiqishuliang>
        <div class="xy-table-item">
          <div class="xy-table-item-label">调整数量 ：</div>
          <div class="xy-table-item-content">
            <el-input-number :disabled="form.tiaozhengleixing === 2" :min="0" :max="openNumberMax" controls-position="right" style="width: 300px" v-model="kaiqishuliang"></el-input-number>
          </div>
        </div>
      </template>
      <template #start_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label">开始时间 ：</div>
          <div class="xy-table-item-content">
            <el-date-picker
              v-model="form.start_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择开始时间"
              style="width: 300px"
            ></el-date-picker>
          </div>
        </div>
      </template>
      <template #end_time>
        <div class="xy-table-item">
          <div class="xy-table-item-label">结束时间 ：</div>
          <div class="xy-table-item-content">
            <el-date-picker
              v-model="form.end_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="请选择结束时间"
              style="width: 300px"
            ></el-date-picker>
          </div>
        </div>
      </template>

    </xy-dialog>
  </div>
</template>

<script>
import { show, save } from "@/api/system/baseForm";
export default {
  props: {
    areas: Array,
    abilities: Array
  },
  data() {
    return {
      temp: 0,//更新调整数量
      adjustEquipmentType: 1,
      isShow: false,
      id: "",
      type: "",
      detail: {},

      kaiqishuliang: 0,
      form: {
        content: "",
        tiaozhengleixing: "",
        kaiqishuliang: 0,
        kaiqishuliang1: 0,
        start_time: "",
        end_time: ""
      },
      rules: {},
      originalData: "",
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    init() {
      for (let key in this.form) {
        if (this.form[key] instanceof Array) {
          this.form[key] = [];
        } else {
          this.form[key] = "";
        }
      }
      this.$refs["dialog"].clearValidate();
    },
    setId(id) {
      if (typeof id == "number") {
        this.id = id;
      } else {
        console.error("error typeof id: " + typeof id);
      }
    },
    getId() {
      return this.id;
    },
    setType(type = "add") {
      let types = ["add", "editor"];
      if (types.includes(type)) {
        this.type = type;
      } else {
        console.warn("Unknown type: " + type);
      }
    },
    setForm(key = [], value = []) {
      if (key instanceof Array) {
        key.forEach((key, index) => {
          this.form[key] = value[index] ?? "";
        });
      }
      if (typeof key === "string") {
        this.form[key] = value;
      }
      if (!key) {
        this.init();
      }
    },

    async getDetail() {
      const res = await show({ id: this.id, table_name: "transfers" });
      this.$integrateData(this.form, res);
      this.originalData = JSON.stringify(this.form);
      this.detail = res;
    },

    submit() {
      if (this.form.tiaozhengleixing === "" || this.form.tiaozhengleixing === undefined) {
        this.$message({
          message: "请选择类型",
          type: "warning"
        })
        return
      }
      const leixingLabel = this.types.find(i => i.id === this.form.tiaozhengleixing)?.id
      if (leixingLabel === 0) {
        this.equipmentType === 1 ? (this.form.kaiqishuliang1 = Number(this.detail?.kaiqishuliang1) - Number(this.kaiqishuliang)) : (this.form.kaiqishuliang = Number(this.detail?.kaiqishuliang) - Number(this.kaiqishuliang))
      } else if (leixingLabel === 1) {
        this.equipmentType === 1 ? (this.form.kaiqishuliang1 = Number(this.detail?.kaiqishuliang1) + Number(this.kaiqishuliang)) : (this.form.kaiqishuliang = Number(this.detail?.kaiqishuliang) + Number(this.kaiqishuliang))
      } else {
        this.equipmentType === 1 ? this.form.kaiqishuliang1 = 0 : this.form.kaiqishuliang = 0;
      }
      let updateData = JSON.stringify(this.form);
      let text = ""
      console.log(this.form)
      return
      if (updateData !== this.originalData) {
        let originalData = JSON.parse(this.originalData)
        let nowData = JSON.parse(updateData)
        let kv = new Map([
          ['content','调令内容'],
          ['tiaozhengleixing','调整状态'],
          ['kaiqishuliang1','水泵调整数量'],
          ['kaiqishuliang','闸门调整数量'],
        ])
        for (let key of kv.keys()) {
          if (key === 'kaiqishuliang' || key === 'kaiqishuliang1') {
            if (this.detail.equipment_id_equipments_id_relation?.type === 1) {
              text += nowData[key] === originalData[key] ? "" : (`【${kv.get(key)}】从"${originalData[key] || "0"}"更改为"${nowData[key]}"` || " ")
            }
          } else {
            text += nowData[key] === originalData[key] ? "" : (`【${kv.get(key)}】从"${this.types.find(i => i.id === originalData[key])?.value || originalData[key] || " "}"更改为"${this.types.find(i => i.id === nowData[key])?.value || nowData[key]}"` || " ")
          }
        }
      }
      this.form.to_transfer_id = this.detail.id;
      this.form.is_adjust =  1;
      this.form.id_logs_transfer_id_relation = this.detail.id_logs_transfer_id_relation.map(i => ({
        transfer_id: i.transfer_id,
        content: i.content,
        created_at: this.$moment().format("YYYY-MM-DD HH:mm:ss")
      }))
      this.form.id_logs_transfer_id_relation.push({
        transfer_id: this.detail.id,
        content: text
      })
      for (let key in this.detail) {
        if (/_relation|_at/g.test(key)) {
          delete this.detail[key]
        }
      }
      delete this.detail.id;
      save({
        table_name: "transfers",
        ...this.detail,
        ...this.form,
        status: 2,
      }).then((res) => {
        if (updateData !== this.originalData) {
          save({
            table_name: "logs",
            transfer_id: this.getId(),
            content: text,
            created_at: this.$moment().format("YYYY-MM-DD HH:mm:ss")
          },false)
        }
        this.$message({
          type: "success",
          message: "操作成功",
        });
        this.isShow = false;
        this.$emit("refresh");
      });
    },
  },
  computed: {
    myarea () {
      return this.areas.find(i => i.value === this.detail.equipment_id_equipments_id_relation?.area)?.key || "";
    },
    myleibie () {
      return this.abilities.find(i => i.value === this.detail?.leibie)?.key || "";
    },

    openNumberMax () {
      let a = this.temp;
      const leixingLabel = this.types.find(i => i.id === this.form.tiaozhengleixing)?.value
      if (leixingLabel === '关闭') {
        return this.equipmentType === 1 ? (Number(this.detail?.kaiqishuliang1 || 0)) : (Number(this.detail?.kaiqishuliang || 0))
      } else if (leixingLabel === '全关') {
        return this.equipmentType === 1 ? (Number(this.detail?.kaiqishuliang1 || 0)) : (Number(this.detail?.kaiqishuliang || 0));
      } else {
        return this.equipmentType === 1 ? ((Number(this.detail?.equipment_id_equipments_id_relation?.shuibengtaishu) - Number(this.detail?.kaiqishuliang1) || 0)) : ((Number(this.detail?.equipment_id_equipments_id_relation?.bengzhashuliang) - Number(this.detail?.kaiqishuliang) || 0))
      }
    },

    equipmentType () {
      return this.adjustEquipmentType;
      //return this.detail?.equipment_id_equipments_id_relation?.type;
    },

    types () {
      let temp = this.equipmentType;
      if (this.equipmentType === 1) {
        return [
          {
            id: 0,
            value: "关闭"
          },
          {
            id: 1,
            value: "增开"
          },
          {
            id: 2,
            value: "全关"
          }
        ]
      } else {
        return [
          {
            id: 0,
            value: "关闭"
          },
          {
            id: 1,
            value: "调整开度"
          },
          {
            id: 2,
            value: "全关"
          }
        ]
      }
    }
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === "editor") {
          this.getDetail();
        }
      } else {
        this.id = "";
        this.type = "";
        this.originalData = "";
        this.init();
        this.$refs["dialog"].clearValidate();
        delete this.form.id;
      }
    },
    temp(val) {
      this.kaiqishuliang = 0;
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  text-align: left;
}
</style>