jf-frock/src/views/BidSystem/ProductDeOrder/detail.vue

<template>
  <div class="BidSystemProductDeOrderEdit">
    <Toptitle title="拆单页">
      <slot name="titleButton">
        <Button @click="goback()"
                type="primary"
                ghost
                style="margin-right:10px;">取消</Button>
        <Button @click="postData()"
                type="primary"
                ghost
                style="margin-right:10px;">保存</Button>
      </slot>
    </Toptitle>
    <div class="top_search">
      <div><span>订单号:</span>{{formData.order_no}}</div>
      <div><span>小区名称:</span>{{formData.residential_name}}</div>
      <div><span>客户姓名:</span>{{formData.client_name}}</div>
      <div><span>紧急程度:</span><span v-for="_item in warningList"
              :key="_item.id"
              v-show="_item.id==formData.warning_state">{{_item.title}}</span></div>
      <div><span>收款:</span>{{formData.pay_state==1?'已收款':'未收款'}}</div>
      <div><span>详细地址:</span>{{formData.address}}</div>
      <div><span>手机号:</span>{{formData.mobile}}</div>
      <div><span>开始日期:</span>{{func.replaceDate(formData.start_time)}}</div>
      <div><span>交付日期:</span>{{func.replaceDate(formData.end_time)}}</div>
      <div><span>业务员:</span> <span v-for="item in salesmanList"
              :key="item.id"
              v-show="formData.salesman==item.id">{{formData.salesman}}</span>
      </div>
      <!-- <div><span>订单类型:</span>{{formData.renovation_type==1?"工装":"家装"}}</div> -->
      <div><span>备注:</span>{{formData.remark}}</div>
    </div>
    <div class="addArea">
      <div class="addAreaTable">
        <Table :columns="tableColumns"
               :data="formData.detail"
               border>
          <template slot="set"
                    slot-scope="{row,index}">
            <a style="margin:0 5px"
               @click="handleSet(row,index,1)">拆单</a>
            <a style="margin:0 5px"
               @click="handleSet(row,index,2)">详情</a>
          </template>
        </Table>
      </div>
    </div>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: 'BidSystemProductDeOrderEdit',
  components: {

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      showSupModal: false,
      showPDTModal: false,
      formData: {
        order_no: '',
        orders_area_product_detail_id: '',
        residential_name: '',
        client_name: '',
        address: '',
        mobile: '',
        pay_state: '',
        warning_state: '',
        salesman: '',
        remark: '',
        //区域列表
        area: [
          {
            num: '',
            title: '',
            unit: '',
            quantity: '',
            house_type: '',
            remark: '',
            order_no: '',
            product: [
              // {
              //   title:'',
              //   num:'',
              //   measure:'',
              //   process_property:'',
              //   url:'',
              //   url_number:'',
              //   remark:''
              // }
            ]
          }
        ],
      },
      product: [{}],
      tableColumns: [
        { title: '序号', key: 'id', align: 'center', minWidth: 80 },
        { title: '产品名称', key: 'title', align: 'center', minWidth: 120 },
        { title: '计量单位', key: 'unit', align: 'center', minWidth: 100 },
        { title: '图号', key: 'url_number', align: 'center', minWidth: 80 },
        { title: '数量', key: 'num', align: 'center', minWidth: 80 },
        { title: '价格', key: 'price', align: 'center', minWidth: 80 },
        { title: '规格', key: 'measure', align: 'center', minWidth: 140 },
        { title: '工艺属性', key: 'process_property', align: 'center', minWidth: 140, tooltip: true },
        {
          title: '图纸', key: 'url', align: 'center', minWidth: 80,
          render: (h, params) => {
            const { row } = params
            return h('div', row.url.map((item, index) => {
              return h('img', {
                attrs: {
                  src: this.$store.state.ip + item,
                  style: 'max-width:50px;max-height:50px;position:relative;top:3px;'
                },
                on: {
                  click: (e) => {
                    // this.axios('/api/orders_img', { params: { id: row.id, type: 1 } }).then(res => {
                    // if (res.code == 200) {
                    // row.imgs = res.data
                    let list = []
                    row.url.forEach(el => {
                      list.push({ 'img_url': el })
                    });
                    this.$previewImg({
                      list,
                      baseUrl: this.$store.state.ip,
                      baseImgField: 'img_url',
                      baseTitleField: ''
                    })
                    // }
                    // })
                  }
                }
              })
            }))
          }
        },
        { title: '备注', key: 'remark', align: 'center', minWidth: 80 },
        { title: '操作', key: 'name', align: 'center', width: '120', slot: 'set', minWidth: 80, fixed: 'right' },
      ],
      //产品分类列表
      PDTTypeList: [],
      //业务员列表
      salesmanList: [],
      warningList: [],
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    // 2编辑 3详情 4变更 5变更记录
    this.$route.query.type == 3 ? this.isChecked = true : ''
    this.$route.query.order_no ? this.formData.order_no = this.$route.query.order_no : ''
    this.$route.query.orders_area_product_detail_id ? this.formData.orders_area_product_detail_id = this.$route.query.orders_area_product_detail_id : ''
    // 获取紧急程度
    this.axios.get('/api/warning_list').then(res => { this.warningList = res.data.data })
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.axios('/api/user').then(res => this.salesmanList = res.data.data)
    this.axios('/api/parts_product_list').then(res => { this.PDTTypeList = res.data })
    this.initData(this.formData.order_no, this.formData.orders_area_product_detail_id)
  },
  methods: {
    initData (order_no, orders_area_product_detail_id) {
      this.axios({
        method: 'get',
        url: '/api/order_area_explode',
        params: {
          order_no,
        }
      }).then((res) => {
        this.formData = res.data
        this.formData.list.forEach(element => {
          element.product.forEach((el, index) => {
            el.index = index + 1
          });
        });
      }).catch((err) => { });
    },
    // 1拆单  2详情
    handleSet (row, index, type) {
      this.$router.push({
        path: '/cms/BidSystem/ProductDeOrder/deorderdetail',
        query: {
          type,
          order_no: this.$route.query.order_no,
          orders_area_product_detail_id: row.id
        }
      })
    },
    postData () {
      this.axios({
        method: 'post',
        url: '/api/order_area_add',
        data: {
          ...this.formData
        }
      }).then((res) => {
        this.$Message.success(res.msg)
      }).catch((err) => { });
    },
    goback () { this.$router.go(-1) }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.BidSystemProductDeOrderEdit {
  overflow: hidden;
  overflow-y: auto;
  .top_search {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 0;
    font-size: 14px;
    div {
      width: 200px;
      padding: 5px;
    }
  }
  .addArea {
    .addAreaTable {
      padding: 20px 0;
    }
    position: relative;
    padding: 15px;
    margin-bottom: 30px;
    border-radius: 5px;
    box-shadow: 1px 1px 5px 1px #999;
    .addAreaBtn {
      position: absolute;
      right: 20px;
      top: 20px;
    }
    /deep/ .ivu-form-item {
      display: inline-block;
      width: 220px;
    }
  }
}
</style>