patrol-wzgl-web/src/views/outbounds/component/showChuku.vue

<template>
  <div>
    <xy-dialog :is-show.sync="isShow" type="normal" title="查看" class="contract-detail">
      <template v-slot:normalContent>
        <el-descriptions title="基本信息" :column="2" border>
            <el-descriptions-item label="出库类型">{{form.chukuleixing}}</el-descriptions-item>
            <el-descriptions-item label="出库日期">{{form.chukushijian}}</el-descriptions-item>
            <el-descriptions-item label="借用部门">{{form.jieyongbumen}}</el-descriptions-item>
            <el-descriptions-item label="经办人">{{form.jilurenyuan}}</el-descriptions-item>
            <el-descriptions-item label="物资信息单" :span="2">
              <div v-for="item in zuozhengList">
                 <a style="color: blue;" :href="item.url" target="_blank">{{item.name}}</a>
              </div>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">{{form.beizhu}}</el-descriptions-item>
        </el-descriptions>
        <div style="margin: 10px 0;font-weight: bold;color:#303133;font-size: 16px;">
          物资明细
        </div>
        <xy-table style="width: 100%" :height="260" :is-page="false" :list="mingxiList" :table-item="mingxiTable">
          <template v-slot:btns>
            <div></div>
          </template>
        </xy-table>
        <div style="margin: 10px 0;font-weight: bold;color:#303133;font-size: 16px;">
          出库记录单
        </div>
        <div>
          <!-- 确认出库 -->
          <div>
            <template v-for="(item,index) in fileList">
              <div>
                <a :href="item.url" style="color:blue" target="_blank">{{item.name}}</a>
              </div>
              <!-- <el-image
                  style="width: 100px; height: 100px"
                  :src="item.url"
                  :key="index"
                  :initial-index="index">
                </el-image> -->
            </template>

          </div>

        </div>
      </template>
      <template v-slot:footerContent>
        <Button @click="isShow=false">关闭</Button>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
  import {
    save,
    index,
    show,
    destroy
  } from '@/api/system/baseForm.js'
  import {
    Message
  } from 'element-ui'
  export default {
    components: {},
    data() {
      return {
        id: '',
        isShow: false,
        tableName: 'outbounds',
        zuozhengList:[],
        fileList: [],
        form: {
          rukushijian: '',
          rukuleixing: '',
          pandianleixing: '',
          jingbanren: '',
          jilurenyuan: '',
          baoguanrenyuan: '',
          beizhu: '',
          zuozhengwenjian: '',
          rukutupian:''
        },
        mingxiList: [],
        mingxiTable: [{
            label: '序号',
            type: 'index',
            fixed: 'left',
            width: 80
          },
          {
            label: '物资名称',
            prop: 'zichanmingcheng',
            width: 180
          },
          {
            label: '物资型号',
            prop: 'guigexinghao',
            width: 180
          },{
            label: '物资规格',
            prop: 'wuziguige',
            width: 180
          }, {
            label: '物资类型',
            prop: 'wuzileixing',
            width: 120
          },
          // {
          //   label: '种类编码',
          //   prop: 'wuzibianma',
          //   width: 120
          // },
          {
            label: '单位',
            prop: 'jiliangdanwei',
            width: 80
          }, {

              label: '生产日期',
              prop: 'shengchanriqi',
              width: 120
          },{
            label: '入库批次',
            prop: 'rukupici',
            width: 120
          }, {
              label: '在库数量',
              prop: 'zaikushuliang',
              width: 80
            }, {
              label: '借用数量',
              prop: 'jieyongshuliang',
              width: 80
            }, {
              label: '是否回库',
              prop: 'shifouhuiku',
              width: 80
            }, , {
              label: '回库日期',
              prop: 'huikushijian',
              width: 120
            }
        ],
        // 打印
        printArr: ''
      }
    },
    watch: {
      isShow(newVal) {
        if (newVal) {
          this.getDetail()
        }else{
          this.id = ''
          this.fileList = []
          this.zuozhengList = []
          this.form = {
            chukushijian: '',
            guanliandiaoling: '',
            chukuleixing: '',
            jieyongcangku: '',
            jieyongbumen: '',
            jilurenyuan: '',
            baofeiyuanyin: '',
            zuozhengwenjian: '',
            beizhu: '',
            chukumingxi: ''
          }

        }
      }
    },
    created() {
    },
    methods: {
      async getDetail() {
        const res = await show({
          id: this.id,
          table_name: this.tableName
        })
        this.form = {
          chukuleixing:res?.chukuleixing,
          chukushijian: res?.chukushijian,
          zhuangtai: res?.zhuangtai,
          guanliandiaoling: res?.guanliandiaoling,
          jieyongcangku: res?.jieyongcangku,
          jieyongbumen: res?.jieyongbumen,
          jilurenyuan: res?.jilurenyuan,
          baofeiyuanyin: res?.baofeiyuanyin,
          zuozhengwenjian: res.zuozhengwenjian ? res.zuozhengwenjian : [],
          beizhu: res?.beizhu,
          chukumingxi: ''
        }
        this.mingxiList = res.id_outbounds_items_outbounds_id_relation
        this.zuozhengList = []
        const _lists = res.zuozhengwenjian_upload_details ? res.zuozhengwenjian_upload_details : []
        for (var f of _lists) {
          this.zuozhengList.push({
            name: f?.original_name,
            url: f?.url,
            response: f
          })
        }

        this.fileList = []
        const chuku_lists = res.qianzi_upload_details ? res.qianzi_upload_details : []
        for (var f of chuku_lists) {
          this.fileList.push({
            name: f?.original_name,
            url: f?.url,
            response: f
          })
        }

      },
    }
  }
</script>

<style scoped>
  .step-content {
    min-height: 300px;
  }

  .operation-bar {
    display: flex;
    justify-content: flex-end;
  }

  .step-complete {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
  }
</style>