ncs_project/manager-admin/src/views/pjOrder/Edit.vue

<template>
  <div class="container" v-loading="loading">
    <el-descriptions class="margin-top"  title="订单详情" :column="2">
      <el-descriptions-item>
        <template slot="label">
          项目编号
        </template>
        <span style="color: #5daf34">{{modelForm.order_no}}</span>
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          项目名称
        </template>
        {{modelForm.name}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          创建时间
        </template>
        {{modelForm.create_time | unixToDate}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          销售
        </template>
        {{modelForm.sales}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          相关负责人
        </template>
        <el-checkbox-group v-model="checkList">
          <el-checkbox v-for="(item, index) in userList" :key="index" :label="item.email" :value="item.email"> {{ item.user_name }}</el-checkbox>
        </el-checkbox-group>
      </el-descriptions-item>
    </el-descriptions>
    <el-button v-if="userList.length > 0" :disabled="checkList.length === 0" type="primary" style="margin: 10px;" @click="handleSendEmail">邮件通知</el-button>
    <el-tooltip class="item" effect="dark" content="方便销售填写增量订单和代理商复购订单" placement="top">
      <el-button type="success" style="margin: 10px;" @click="handleReset">订单复制</el-button>
    </el-tooltip>
    <el-steps :active="2" finish-status="error" simple v-if="modelForm.status === 6">
      <el-step title="创建定单" status="success"></el-step>
      <el-step title="已作废"></el-step>
    </el-steps>
    <el-steps v-else :active="modelForm.status + 1" finish-status="success" simple>
      <el-step title="创建定单"></el-step>
      <el-step title="技术跟进"></el-step>
      <el-step title="生产跟进"></el-step>
      <el-step title="收到款"></el-step>
      <el-step title="已发货"></el-step>
      <el-step title="已完结"></el-step>
    </el-steps>
    <el-divider></el-divider>
    <el-tabs tab-position="left" @tab-click="pjGoodsReload">
      <el-tab-pane label="项目信息">
        <div class="base-info-item">
          <el-descriptions class="margin-top"  title="订单详情" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                项目类型
              </template>
              {{modelForm.type}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目规模
              </template>
              {{modelForm.scale}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                要求发货日期
              </template>
              {{ modelForm.ship_date_required | unixToDate('yyyy-MM-dd') }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                项目金额
              </template>
              {{modelForm.amount}}
            </el-descriptions-item>
            <el-descriptions-item  v-if="boolFounder || permissions.filter(p => p === 'pjReceipt').length > 0">
              <template slot="label">
                应收
              </template>
              {{modelForm.amount_receivable}}
            </el-descriptions-item>
            <el-descriptions-item  v-if="boolFounder || permissions.filter(p => p === 'pjReceipt').length > 0">
              <template slot="label">
                已收
              </template>
              {{modelForm.amount_receipts}}
            </el-descriptions-item>
            <el-descriptions-item v-if="modelForm.country">
              <template slot="label">
                国家
              </template>
              {{modelForm.country}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                客户地区
              </template>
              {{modelForm.province_name + modelForm.city_name + modelForm.county_name + modelForm.town_name}}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider>收货信息</el-divider>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                收货人
              </template>
              {{modelForm.consignee}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                收货人电话
              </template>
              {{modelForm.phone}}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                收货地区
              </template>
              {{modelForm.ship_province + modelForm.ship_city + modelForm.ship_county + modelForm.ship_town}}
            </el-descriptions-item>
          </el-descriptions>
          <el-divider>其它</el-divider>
          <el-descriptions class="margin-top" :column="2" border>
            <el-descriptions-item>
              <template slot="label">
                销售备注
              </template>
              {{modelForm.sales_remark}}
            </el-descriptions-item>
          </el-descriptions>
          <el-form :model="modelForm" :rules="modelFormRule" label-width="100px" ref="modelForm" style="margin-top: 10px">
            <el-form-item v-if="modelForm.status === 0 && (boolFounder || permissions.filter(p => p === 'pjOrderListSelf').length > 0)">
              <el-button type="primary" @click="handleCancel" class="save">作废</el-button>
            </el-form-item>
            <el-form-item v-if="modelForm.status === 6">
              <el-button type="success" @click="handleReset" class="save" :disabled="disable">重新生成</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="服务相关" v-if="boolFounder || permissions.filter(p => p === 'pjTech').length > 0">
        <el-form :model="modelForm" :rules="serverFormRule" label-width="100px" ref="serverForm">
          <el-row>
            <el-col :span="12">
              <el-form-item label="网络类型" prop="net_mode">
                <el-select v-model="modelForm.net_mode" placeholder="请选择" @change="netModelChange" clearable>
                  <el-option label="独立局域网" value="独立局域网"/>
                  <el-option label="非独立局域网" value="非独立局域网"/>
                  <el-option label="公网" value="公网"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="信息科联系人" prop="info_contacts">
                <el-input v-model="modelForm.info_contacts" placeholder="请输入信息科联系人及电话" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="护理部联系人" prop="nurse_contacts">
                <el-input v-model="modelForm.nurse_contacts" placeholder="请输入护理部联系人及电话" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备科联系人" prop="device_contacts">
                <el-input v-model="modelForm.device_contacts" placeholder="请输入设备科联系人及电话" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="授权码" prop="auth_base">
                <el-input v-model="modelForm.auth_base" :maxlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授权过期日" prop="auth_expires">
                <el-input v-model="modelForm.auth_expires" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="授权序列号" prop="auth_code">
                <el-input v-model="modelForm.auth_code" type="textarea"
                          :autosize="{ minRows: 2, maxRows: 6}"
                          :minlength="50"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="授权计划备注" prop="auth_remark">
                <el-input v-model="modelForm.auth_remark" type="textarea"
                          :autosize="{ minRows: 2, maxRows: 6}"
                          :minlength="150"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="pve_ip" prop="pve_ip">
                <el-input v-model="modelForm.pve_ip" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="pve_user" prop="pve_user">
                <el-input v-model="modelForm.pve_user" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="pve_pwd" prop="pve_pwd">
                <el-input v-model="modelForm.pve_pwd" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="route_ip" prop="route_ip">
                <el-input v-model="modelForm.route_ip" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="route_ip2" prop="route_ip2">
                <el-input v-model="modelForm.route_ip2" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="route_user" prop="route_user">
                <el-input v-model="modelForm.route_user" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="route_pwd" prop="route_pwd">
                <el-input v-model="modelForm.route_pwd" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="linux_ip" prop="linux_ip">
                <el-input v-model="modelForm.linux_ip" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="linux_ip2" prop="linux_ip2">
                <el-input v-model="modelForm.linux_ip2" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="linux_user" prop="linux_user">
                <el-input v-model="modelForm.linux_user" :maxlength="20"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="linux_pwd" prop="linux_pwd">
            <el-input v-model="modelForm.linux_pwd" :maxlength="20"></el-input>
          </el-form-item>
          <el-form-item label="其它备注：" class="description">
            <UE ref="ue" :defaultMsg="modelForm.tech_remark"></UE>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleTech" class="save">保存</el-button>
            <el-button v-if="modelForm.status === 1" type="danger" @click="handleTechCancel" class="save">退回</el-button>
            <el-button v-if="modelForm.status === 4" type="success" @click="handleFinished" class="save">定单完成</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="项目产品">
        <pj-order-items :order-no="orderNo" :type="modelForm.type"></pj-order-items>
      </el-tab-pane>
      <el-tab-pane label="收款明细" v-if="boolFounder || permissions.filter(p => p === 'pjReceipt').length > 0">
        <pj-receipt :order-no="orderNo"></pj-receipt>
      </el-tab-pane>
      <el-tab-pane label="生产发货情况">
<!--        <div class="base-info-item">-->
<!--          <el-form :model="modelForm" label-width="100px">-->
<!--            <el-form-item label="发货人" prop="logistics_name">-->
<!--              <el-input v-model="modelForm.logistics_name" :maxlength="20" :disabled="true"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="发货日期" prop="ship_date">-->
<!--              <el-date-picker-->
<!--                v-model="modelForm.ship_date"-->
<!--                align="right"-->
<!--                type="date"-->
<!--                placeholder="选择日期"-->
<!--                :picker-options="{disabledDate(time) { return time.getTime() >= Date.now() }}">-->
<!--              </el-date-picker>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="签收单：" prop="receipt_file" style="width: 90%;text-align: left;" v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0">-->
<!--              <el-upload-->
<!--                class="avatar-uploader"-->
<!--                :action="`${MixinUploadApi}?scene=pjorders`"-->
<!--                :on-preview="handlePictureCardPreview"-->
<!--                :show-file-list="false"-->
<!--                :before-upload="beforeAvatarUpload"-->
<!--                :on-success="handleImageSuccess"-->
<!--              >-->
<!--                <img v-if="modelForm.receipt_file" :src="modelForm.receipt_file" class="avatar">-->
<!--                <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
<!--              </el-upload>-->
<!--              <el-dialog :visible.sync="dialogImage">-->
<!--                <img width="100%" :src="dialogImageUrl" alt="">-->
<!--              </el-dialog>-->
<!--            </el-form-item>-->
<!--            <el-form-item v-if="boolFounder || permissions.filter(p => p === 'pjOrderShip').length > 0">-->
<!--              <el-button type="primary" @click="handleLogisticsSave" class="save">保存</el-button>-->
<!--            </el-form-item>-->
<!--          </el-form>-->
<!--        </div>-->
        <pj-shipped-list :order-no="orderNo"></pj-shipped-list>
      </el-tab-pane>
      <el-tab-pane label="通用备注">
        <pj-remark-list :table-name="'pj_order'" :table-id="keyId"></pj-remark-list>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as API_order from '@/api/pjOrder'
import * as API_pjChargePerson from '@/api/pjChargePerson'
import { UE } from '@/components'
import { RegExp } from '~/ui-utils'
import pjOrderItems from './OrderItems'
import pjReceipt from './Receipt'
import pjRemarkList from './Remark'
import pjShippedList from './shipped'
import Storage from '../../utils/storage'
import * as API_Draft from '@/api/pjDraft'
import { sendEmail } from '../../api/pjChargePerson'

export default {
  name: 'pjOrderEdit',
  components: {
    [UE.name]: UE, pjOrderItems, pjReceipt, pjRemarkList, pjShippedList
  },
  data() {
    const checkHtml = (rule, value, callback) => {
      if (value.match(/<[^>]+>/g)) {
        callback(new Error('产品名称不合法！'))
      } else {
        callback()
      }
    }

    const checkSn = (rule, value, callback) => {
      if (!value) {
        callback(new Error('生产型号/产品编码不能为空'))
      } else if (!/^[a-zA-Z0-9_\\-]+$/g.test(value)) {
        callback(new Error('请输入数字、字母、下划线或者中划线'))
      } else {
        callback()
      }
    }

    return {
      boolFounder: JSON.parse(Storage.getItem('admin_user')).founder === 1,
      permissions: [],
      /** 加载中。。。 */
      loading: false,

      keyId: 0,
      orderNo: '',

      modelForm: {
        ship_date_required: ''
      },
      /** 商品图片放大地址 */
      dialogImageUrl: '',
      /** 是否显示放大图片弹框 */
      dialogImage: false,

      /** 商品详情的校验规则 */
      modelFormRule: {
        name: [
          { required: true, message: '请输入项目名称', trigger: 'blur' },
          { whitespace: true, message: '项目名称不可为纯空格', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
          { validator: checkHtml }
        ]
      },
      serverFormRule: {},
      disable: false,
      checkList: [],
      userList: []
    }
  },
  mounted() {
    if (!this.boolFounder) {
      this.permissions = JSON.parse(Storage.getItem('permissions'))
    }
    if (this.$route.params && this.$route.params.id !== 0) {
      if (this.$route.params.id.length > 11) {
        this.orderNo = this.$route.params.id
      } else {
        this.keyId = parseInt(this.$route.params.id)
      }
      this.getData()
    }
  },
  activated() {
    if (this.$route.params && this.$route.params.id !== 0) {
      if (this.$route.params.id.length > 11) {
        this.orderNo = this.$route.params.id
      } else {
        this.keyId = parseInt(this.$route.params.id)
      }
      this.getData()
    }
  },
  methods: {
    getData() {
      if (this.keyId) {
        API_order.getModel(this.keyId).then(res => {
          console.log(res)
          this.modelForm = res
          this.orderNo = res.order_no
          if (this.modelForm.ship_date) {
            this.modelForm.ship_date *= 1000
          }
          this.API_GetUserList()
        })
      } else {
        API_order.getModelByOrderNo(this.orderNo).then(res => {
          console.log(res)
          this.modelForm = res
          this.keyId = res.id
          if (this.modelForm.ship_date) {
            this.modelForm.ship_date *= 1000
          }
          this.API_GetUserList()
        })
      }
    },
    API_GetUserList() {
      const data = {
        fixedCondition: ' order_no = ' + this.orderNo,
        page_no: 1,
        page_size: 1000
      }
      API_pjChargePerson.getList(data).then(res => {
        this.userList = res.data
      })
    },
    pjGoodsReload(tab, event) {
      if (tab.index === '0') {
        this.getData()
      }
    },
    handleSave() {
      this.$refs['modelForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          let _params = {
            ...this.modelForm
          }
          if (_params.ship_date_required) {
            _params.ship_date_required /= 1000
          }
          if (this.modelForm.ship_date) {
            _params.ship_date /= 1000
          }
          _params.sales_remark = this.$refs['ue'].getUEContent()

          _params.id = this.keyId
          API_order.editModel(_params).then(response => {
            this.loading = false
            this.$message.success('保存成功')
          })
        } else {
          this.loading = false
          this.$message.error('表单中存在未填写或者填写有误的地方,已有错误标示，请检查并正确填写')
        }
      })
      return
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogImage = true
    },
    /** 图片上传之前的校验  */
    beforeAvatarUpload(file) {
      const isType = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png'
      const isLt1M = file.size / 1024 / 1024 < 1

      if (!isType) {
        this.$message.error('上传图片只能是 JPG/JPEG/PNG 格式!')
      }
      if (!isLt1M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }

      return isType && isLt1M
    },
    /** 文件列表上传成功时的钩子  上传成功校验 */
    async handleImageSuccess(response, file) {
      if (file.status === 'success') {
        this.modelForm.receipt_file = response.url
      }
    },
    handleLogisticsSave() {
      const adminUser = JSON.parse(Storage.getItem('admin_user'))
      // console.log(adminUser)
      this.modelForm.logistics_user = adminUser.uid
      this.modelForm.logistics_name = adminUser.realname
      this.modelForm.status = 4

      if (this.modelForm.ship_date) {
        this.modelForm.ship_date /= 1000
      }

      API_order.editModel(this.modelForm).then(response => {
        this.$message.success('保存成功')
        this.modelForm.ship_date *= 1000
      })
    },
    netModelChange(val) {
      if (val === '独立局域网') {
        if (!this.modelForm.pve_ip) {
          this.modelForm.pve_ip = '172.28.100.8'
          this.modelForm.pve_user = 'root'
          this.modelForm.pve_pwd = '123qwe,.'
          this.modelForm.route_ip = '172.28.100.1'
          this.modelForm.route_user = 'root'
          this.modelForm.route_pwd = '123qwe,.'
          this.modelForm.linux_ip = '172.28.100.100'
          this.modelForm.linux_user = 'root'
          this.modelForm.linux_pwd = '123qwe,.'
        }
      } else {
        this.modelForm.pve_ip = ''
        this.modelForm.pve_user = ''
        this.modelForm.pve_pwd = ''
        this.modelForm.route_ip = ''
        this.modelForm.route_user = ''
        this.modelForm.route_pwd = ''
        this.modelForm.linux_ip = ''
        this.modelForm.linux_user = ''
        this.modelForm.linux_pwd = ''
      }
    },
    handleTech() {
      if (this.modelForm.status === 0) {
        this.modelForm.status = 1
      }
      const adminUser = JSON.parse(Storage.getItem('admin_user'))
      this.modelForm.tech_user = adminUser.uid
      this.modelForm.tech_name = adminUser.realname
      API_order.editModel(this.modelForm).then(response => {
        this.$message.success('完成')
      }).catch()
    },
    handleTechCancel() {
      if (this.modelForm.status === 1) {
        this.modelForm.status = 0
      }
      API_order.editModel(this.modelForm).then(response => {
        this.$message.success('完成')
      }).catch()
    },
    handleFinished() {
      if (this.modelForm.status === 4) {
        this.modelForm.status = 5
      }
      API_order.editModel(this.modelForm).then(response => {
        this.$message.success('完成')
      }).catch()
    },
    handleCancel() {
      if (this.modelForm.status !== 0) {
        this.$message.warning('当前状态不可作废')
        return
      }
      this.modelForm.status = 6
      API_order.editModel(this.modelForm).then(response => {
        this.$message.success('完成')
        this.getData()
        // this.$store.dispatch('delCurrentViews', {
        //   view: this.$route,
        //   $router: this.$router
        // })
      }).catch()
    },
    handleReset() {
      this.$confirm('确定要重新申请草稿吗？', '提示', { type: 'warning' }).then(() => {
        this.disable = true
        this.$message.info('正在生成中...')
        API_Draft.resetDraft(this.modelForm.order_no).then(res => {
          this.$message.success('完成')
          this.$router.push({ name: 'pjDraftListSelf' })
        }).catch(() => {
          this.disable = false
        })
      }).catch(() => {})
    },
    handleSendEmail() {
      let list = []
      let x = ['00:00', '00:01', '24:00']
      let data = []
      x.forEach(item => {
        list.forEach(t => {
          if (item === t.log_time) {
            data.push(t.value)
          } else {
            data.push(0)
          }
        })
      })
      console.log('-------', this.checkList)
      API_pjChargePerson.sendEmail(this.checkList, this.modelForm.order_no).then(res => {
        if (res.success) {
          this.checkList = []
          this.$message.success('发送成功')
        } else {
          this.$message.error(res.message)
        }
      })
    }
  }
}
</script>

<style type="text/scss" lang="scss" scoped>
.container {
  background-color: #fff;
}

div.base-info-item {
  h4 {
    margin-bottom: 10px;
    padding: 0 10px;
    border: 1px solid #ddd;
    background-color: #f8f8f8;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    line-height: 40px;
    text-align: left;
  }

  /** 审核信息-拒绝原因 */
  .auth-info {
    color: red;
  }

  .el-form-item {
    width: 30%;
    min-width: 300px;
  }

  .goods-name-width {
    width: 50%;
    min-width: 300px;
  }

  .el-form-item__content {
    margin-left: 120px;
    text-align: left;
  }

  p.goods-group-manager {
    padding-left: 7.5%;
    text-align: left;
    color: #999;
    font-size: 13px;
  }

  /*teatarea*/
  /deep/ .el-textarea {
    width: 150%;
  }

  .description {
    line-height: 40px;
    width: 100%;
  }
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>