sd-vue/src/views/shengde/group/synchronization/order/index.vue

<template>
  <el-card class="box-card" v-loading="loadingStatus" element-loading-text="数据同步中,请稍后" element-loading-background="rgba(0, 0, 0, 0.2)">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 42vw">
      <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
        <el-tabs v-model="activeName">
          <el-tab-pane label="重置时间" name="first" v-if="!userInfo.subsidiaryId">
            <div style="font-size: 24px; font-weight: 700; color: #e51717; text-align: center">最后一次同步时间: {{ synchroTime }}</div>
            <br />
            <el-form ref="ruleForm" :model="form" :rules="formRules" label-width="100px">
              <el-form-item label="重置同步时间:" prop="time">
                <el-date-picker
                  type="datetime"
                  v-model="form.time"
                  placeholder="请选择重置同步时间"
                  size="small"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptions"
                  :default-time="time"
                >
                </el-date-picker>
              </el-form-item>
              <div style="width: 100%; padding-top: 16px; text-align: center">
                <el-button type="primary" @click="clickSubmit()" size="small" v-db-click>保 存</el-button>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="已发货订单" name="second">
            <el-form ref="ruleFormTwo" :model="formTwo" :rules="formTwoRules" label-width="100px">
              <el-form-item label="开始时间:" prop="approve_time">
                <el-date-picker
                  type="datetime"
                  v-model="formTwo.approve_time"
                  placeholder="请选择开始时间"
                  size="small"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间:" prop="end_time">
                <el-date-picker
                  type="datetime"
                  v-model="formTwo.end_time"
                  placeholder="请选择结束时间"
                  size="small"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="订单号:" prop="bill_code">
                <el-input v-model="formTwo.bill_code" placeholder="请输入订单号" size="small"></el-input>
              </el-form-item>
              <el-form-item label="订单状态" prop="trade_status_arr">
                <el-select v-model="formTwo.trade_status_arr" multiple placeholder="请选择订单状态" style="width: 100%" size="small">
                  <el-option v-for="item in tradeStatus" :key="item.dictKey" :label="item.dictValue" :value="item.dictKey" />
                </el-select>
              </el-form-item>
              <el-form-item label="仓库编码:" prop="storage_code">
                <el-input v-model="formTwo.storage_code" placeholder="请输入仓库编码" size="small"></el-input>
              </el-form-item>
              <el-form-item label="付款时间:" prop="pay_time">
                <el-date-picker
                  type="datetime"
                  v-model="formTwo.pay_time"
                  placeholder="请选择付款时间"
                  size="small"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="完成时间:" prop="finish_time">
                <el-date-picker
                  type="datetime"
                  v-model="formTwo.finish_time"
                  placeholder="请选择完成时间"
                  size="small"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptionsTwo"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="发货时间:" prop="send_goods_time">
                <el-date-picker
                  type="datetime"
                  v-model="formTwo.send_goods_time"
                  placeholder="请选择发货时间"
                  size="small"
                  style="width: 100%"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="pickerOptionsTwo"
                >
                </el-date-picker>
              </el-form-item>
              <div style="width: 100%; padding-top: 16px; text-align: center">
                <el-button type="primary" @click="clickTwoSubmit()" size="small" v-db-click>保 存</el-button>
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-card>
</template>

<script>
import * as API from '@/api/shengde/group/synchronization/order'
import moment from 'moment'
import { mapGetters } from 'vuex'

export default {
  name: 'orderSynchronization',
  data() {
    return {
      synchroTime: '',
      form: {
        time: '',
      },
      formRules: {
        time: [{ required: true, message: '请选择重置同步时间', trigger: ['change', 'blur'] }],
      },
      formTwo: {
        approve_time: '',
        end_time: '',
        bill_code: '',
        trade_status: '',
        trade_status_arr: '',
        storage_code: '',
        pay_time: '',
        finish_time: '',
        send_goods_time: '',
      },
      tradeStatus: [
        {
          dictValue: '打单配货',
          dictKey: '1',
        },
        {
          dictValue: '验货',
          dictKey: '2',
        },
        {
          dictValue: '承重',
          dictKey: '3',
        },
        {
          dictValue: '待发货',
          dictKey: '4',
        },
        {
          dictValue: '财审',
          dictKey: '5',
        },
        {
          dictValue: '已发货',
          dictKey: '8',
        },
        {
          dictValue: '完成',
          dictKey: '9',
        },
        {
          dictValue: '关闭',
          dictKey: '10',
        },
        {
          dictValue: '配货中',
          dictKey: '13',
        },
        {
          dictValue: '打包',
          dictKey: '15',
        },
      ],
      formTwoRules: {
        approve_time: [{ required: true, message: '请选择开始时间', trigger: ['change', 'blur'] }],
        end_time: [{ required: true, message: '请选择结束时间', trigger: ['change', 'blur'] }],
      },
      time: '00:00:00',
      loadingStatus: false,
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7 - 8.64e7 - 8.64e7
        },
      },
      pickerOptionsTwo: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 2592000000 - 2592000000 - 2592000000
        },
      },
      activeName: '',
    }
  },
  created() {
    this.time = moment().format('HH:mm:ss')
  },
  mounted() {
    if (this.userInfo.subsidiaryId) {
      this.activeName = 'second'
    } else {
      this.activeName = 'first'
    }
    this.getTime()
  },
  computed: mapGetters(['userInfo']),
  methods: {
    getTime() {
      API.synchroTimeDetails().then((res) => {
        this.synchroTime = moment(parseInt(res.data.data)).format('YYYY-MM-DD HH:mm:ss')
      })
    },
    clickSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loadingStatus = true
          API.resetTime({ time: new Date(this.form.time).getTime() }).then(
            () => {
              this.loadingStatus = false
              this.msgSuccess('同步完成')
              this.getTime()
            },
            (err) => {
              console.log('resetTime: ' + err)
              this.loadingStatus = false
            }
          )
        }
      })
    },
    clickTwoSubmit() {
      this.$refs.ruleFormTwo.validate((valid) => {
        if (valid) {
          if (this.formTwo.trade_status_arr && this.formTwo.trade_status_arr.length > 0) {
            this.formTwo.trade_status = this.formTwo.trade_status_arr.join(',')
          } else {
            this.formTwo.trade_status = ''
          }
          let data = JSON.parse(JSON.stringify(this.formTwo))
          let approve_time = new Date(this.formTwo.approve_time)
          data.approve_time = Date.parse(approve_time)
          let end_time = new Date(this.formTwo.end_time)
          data.end_time = Date.parse(end_time)
          this.loadingStatus = true
          API.importContract(data).then(
            () => {
              this.loadingStatus = false
              this.msgSuccess('同步完成')
              // this.resetForm('ruleFormTwo')
            },
            (err) => {
              console.log('importContract: ' + err)
              this.loadingStatus = false
            }
          )
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
* {
  font-size: 12px;
}
.box-card {
  height: calc(100vh - 110px);
  overflow-y: auto;
}
.searchBtn {
  background: #20b2aa;
  color: #fff;
  border: 1px solid #20b2aa;
}
::v-deep {
  .el-input__inner {
    border-radius: 1px;
  }
  .el-button--small {
    border-radius: 1px;
  }
  .tableHeader th {
    background-color: #edf0f5;
    height: 35px;
    padding: 0;
  }
}
</style>