drp-ui/src/views/purchase/purchase-order/see/index.vue

<!-- 采购订单修订—— 查看 -->
<script>
import {
  initColumns,
  initDicts,
  initRules,
  initParams,
} from "@/utils/init/index.js";
// import { Columns, TabColumns } from "../add/column";
import orderApi from "@/api/business/purchase/purchase-order";
import { PRINT } from "@/api/business/purchase/task";
import judgeColumns from "../add/column";
import VirtualScroll from 'el-table-virtual-scroll';
import { VirtualColumn } from 'el-table-virtual-scroll';

const { Columns, TabColumns } = judgeColumns();

const NewColumns = initColumns(Columns);
const NewTabColumns = TabColumns.map((element) => ({
  ...element,
  tableColumns: initColumns(element.tableColumns),
}));
// 
const SelectColumns = NewColumns.filter(column => column.inputType === 'Select')
NewTabColumns.forEach(column => {
  SelectColumns.push(...column.tableColumns.filter(cColumn => cColumn.inputType === 'Select'))
});


export default {
  name: "SeePurchaseOrderDrawer",
  dicts: initDicts(SelectColumns),
  components: {
    'virtual-scroll':VirtualScroll,VirtualColumn,
    FileUploadCenter: () => import('../components/FileUploadCenter/index.vue'),
    FilePrint:() => import('../print/index.vue'),
  },
  data() {
    return {
      visible: false,
      loading: false,
      columns: NewColumns,
      printData:{},
      rules: initRules(NewColumns),
      params: {
        ...initParams(NewColumns),
        puOrderItemList: [],
        puOrderExecuteList: [],
      },

      tabColumns: NewTabColumns,
      tabName: "puOrderItemList",
      tableData:[],  //虚拟滚动加载显示的数据
    };
  },
  computed: {
    tabHeight:{
      get(){
        let length = this.params['puOrderItemList'].filter(item => item.delFlag === '0').length;
        return `${length ? 
                  (length > 8 ? 500 :
                   (length *60) +100)
                : 120}px`
      },
      set(){}
    },
  },
  watch: {},
  methods: {
    
    setVisible(prop) {

      this.visible = prop;

      if(!this.visible){

        this.$refs['orderSeeForm'].clearValidate();

      }

    },

    //查询详情
    async fetchItem(prop) {
      try {
        this.loading = true;
        const { code, msg, data } = await orderApi.details(prop);
        if (code === 200) {
          this.params = data;
        }
      } catch (err) {
        //
      } finally {
        this.loading = false;
      }

      try {
          this.loading = true;
          const { data, code } = await PRINT({ id: this.params.id || 628 });
          if (code === 200) {
            this.printData = data;
            this.loading = false;
          }
        } catch (err) {
          alert(err);
        } finally {
        }
    },
    // 取 消
    handleCancel() {
      // this.params = initParams(Columns);
      this.params = {
        ...initParams(this.columns),
        puOrderItemList: [],
        puOrderExecuteList: [],
      }
      this.setVisible(false);
    },
    handleRefresh(){
      let {id} = this.params;
      this.fetchItem(id);
    },
    // 发送NC
    async handleSendNC(){
      console.log('发送NC');

      try {
        let {code} = await orderApi.toNc({ puOrderId:this.params.id});

        if(code == 200){
          this.handleRefresh();
        }
      } catch (error) {
        
      }finally{

      }
    },
    // 判断是否能发送NC
    judgeIsToNC(){

      let {source,status,deliveryStatus} = this.params;

      // 自制 & 状态为：自由态、驳回
      // if(source === '3' &&(status === '0' || status === '3')){
      if(status === '2'){

        // 发送NC之后展示 SUCCESS("0","成功"),SEND_IN("1","发送中"),FAILURE("2","失败");
        //    未发送                发送过但未成功
        if(!deliveryStatus || (deliveryStatus && deliveryStatus !== '0')){

          return true;
        }

        return false;
      }

      return false;
    },
    beforeOpen() { 
      
    },
  },
  created() { 

  },
  mounted() { },
  destroyed() { },
};
</script>
<template>
  <el-drawer 
    direction="btt" 
    size="100%" 
    :with-header="false" 
    :visible.sync="visible" 
    @open="beforeOpen"
    @close="$emit('close')"
    v-loading="loading"
  >
    <el-form 
      size="mini" 
      label-position="right" 
      label-width="140px" 
      :model="params" 
      :rules="rules"
      ref="orderSeeForm" 
    >
        
      <el-card :body-style="{
        padding: '20px',
        display: 'flex',
        'flex-wrap': 'wrap',
      }" style="margin: 10px">
        <div slot="header" style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
          <h3>查看</h3>
          <div style="text-align: right">
            <!-- <FilePrint :id="params.id"></FilePrint> -->
            <FilePrint v-model="printData"></FilePrint>
            <el-button size="mini" @click="handleRefresh">刷新</el-button>
            <template v-if="judgeIsToNC()">
              <el-tooltip
                class="box-item"
                effect="dark"
                :key="params.deliveryStatus"
                :content="params.deliveryMsg"
                placement="bottom-end"
              >
                <el-button 
                  :key="params.deliveryStatus"
                  :disabled="params.deliveryStatus === '1' "
                  size="mini" 
                  type="primary"
                  @click="handleSendNC"
                >{{  params.deliveryStatus === '1' ? '发送中' :
                    (params.deliveryStatus === '2'? '重新发送NC' : '发送NC')
                }}</el-button>
              </el-tooltip>
            </template>
            
            <el-button size="mini" @click="handleCancel">取 消</el-button>
          </div>
        </div>
        <el-row style="display:flex; flex-wrap: wrap;">
          <el-col v-for="(column, index) in columns" :key="index" :span="column.span || 6">
            <el-form-item :prop="column.key" :label="column.title">

              <el-input v-if="column.inputType === 'Input'" 
                v-model="params[column.key]" 
                :placeholder="column.placeholder"
                :clearable="column.clearable" 
                readonly 
                style="width: 100%"
              ></el-input>
              <dr-popover-select v-if="column.inputType === 'PopoverSelect'" 
                v-model="params[column.key]" 
                disabled
                :value-key="column.valueKey" 
                :source.sync="params" 
                :title="column.title" 
                :type="column.referName"
                :multiple="column.multiple" 
                :placeholder="column.placeholder" 
                :data-mapping="column.dataMapping"
                :query-params="column.queryParams"
              ></dr-popover-select>

              <el-input v-if="column.inputType === 'Textarea'" 
                v-model="params[column.key]" 
                type="textarea"
                :placeholder="column.placeholder" 
                :clearable="column.clearable" 
                readonly 
                style="width: 100%"
              ></el-input>

              <el-input-number v-if="column.inputType === 'InputNumber'" 
                v-model="params[column.key]"
                :controls-position="column.controlsPosition" 
                :placeholder="column.placeholder"
                :clearable="column.clearable" 
                :precision="column.precision"
                disabled 
                style="width: 100%"
              ></el-input-number>
              <el-select v-if="column.inputType === 'Select'" 
                v-model="params[column.key]" 
                disabled 
                size="mini"
                :clearable="column.clearable" 
                :placeholder="column.placeholder" 
                style="width: 100%">
                <el-option 
                  v-for="item in dict.type[column.referName]" 
                  :key="item.value" 
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-select v-if="column.inputType === 'TagSelect'" 
                v-model="params[column.key]" 
                multiple 
                clearable
                collapse-tags 
                :placeholder="column.placeholder" 
                :clearable="column.clearable" 
                disabled
                style="width: 100%">
                <template #prefix>
                  <el-icon class="el-icon-view" 
                    style="cursor: pointer" 
                    @click.stop="$message.info(234)">
                  </el-icon>
                </template>
                <el-option 
                  v-for="item in options" 
                  :key="item.value" 
                  :label="item.label" 
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <el-date-picker v-if="column.inputType === 'DatePicker'" 
                v-model="params[column.key]" 
                :type="column.type"
                :placeholder="column.placeholder" 
                :clearable="column.clearable" 
                readonly
                :picker-options="column.pickerOptions" 
                style="width: 100%"
              ></el-date-picker>
              <el-checkbox v-if="column.inputType === 'Checkbox'" 
                v-model="params[column.key]" 
                disabled 
                true-label="Y"
                false-label="N"
              ></el-checkbox>
              <file-upload-center v-if="column.inputType === 'Upload'" 
                v-model="params[column.key]"
                :file-type="column.fileType" 
                :disabled="true"
              ></file-upload-center>
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>
      <el-card :body-style="{
        padding: '20px',
        display: 'flex',
        'flex-wrap': 'wrap',
        position: 'relative',
      }" style="margin: 10px">
        <el-tabs v-model="tabName" style="width: 100%">
          <el-tab-pane 
            v-for="(column, index) in tabColumns" 
            :key="index" 
            :label="column.title" 
            :name="column.key"
          >

            <virtual-scroll 
              :data="params[column.key].filter(item => item.delFlag === '0')" 
              :item-size="53" 
              :key-prop="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'" 
              @change="(virtualList) => tableData = virtualList" 
              :virtualized="true"
            >
            <!-- row-key绑定列唯一值，height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板-->
            <el-table 
              :data="tableData" 
              style="width: 100%"  
              :height="tabHeight"
              border
            >
              <el-table-column label="序号">
                <template slot-scope="scope">
                  {{ scope.$index + 1 }}
                </template>
              </el-table-column>
              <el-table-column 
                v-for="(cColumn, cIndex) in column.tableColumns" 
                :key="cIndex" 
                :prop="cColumn.key"
                :label="cColumn.title" 
                :width="cColumn.width"
              >
                <template slot="header" slot-scope="scope">
                  <span v-if="cColumn.require" style="color: #ff4949">*</span>
                  <span>
                    {{ cColumn.title }}
                  </span>
                </template>
                <template slot-scope="scope">
                  <el-form-item  label-width="0">
                    <span v-if="!cColumn.inputType">
                      {{ scope.row[cColumn.key] }}
                    </span>
                    
                    <el-input v-if="cColumn.inputType === 'Input'" 
                      v-model="scope.row[cColumn.key]"
                      :placeholder="cColumn.placeholder" 
                      :clearable="cColumn.clearable" 
                      readonly 
                      size="mini"
                      style="width: 100%"
                    ></el-input>

                    <!--  -->
                    <dr-popover-select v-if="cColumn.inputType === 'PopoverSelect'"
                      v-model="scope.row[cColumn.key]"
                      :source.sync="scope.row" 
                      :title="cColumn.title" 
                      :value-key="cColumn.valueKey" 
                      disabled
                      :type="cColumn.referName" 
                      :multiple="cColumn.multiple" 
                      :placeholder="cColumn.placeholder"
                      :data-mapping="cColumn.dataMapping" 
                      :query-params="cColumn.queryParams" 
                      size="mini" 
                    ></dr-popover-select>

                    <el-input-number v-if="cColumn.inputType === 'InputNumber'" 
                      v-model="scope.row[cColumn.key]"
                      :precision="cColumn.precision"
                      :controls-position="cColumn.controlsPosition" 
                      :placeholder="cColumn.placeholder"
                      :clearable="cColumn.clearable" 
                      disabled 
                      size="mini" 
                      style="width: 100%"
                    ></el-input-number>

                    <el-select v-if="cColumn.inputType === 'Select'" 
                      v-model="scope.row[cColumn.key]" 
                      disabled 
                      size="mini"
                      :clearable="cColumn.clearable" 
                      :placeholder="cColumn.placeholder" 
                      style="width: 100%">
                      <el-option 
                        v-for="item in dict.type[cColumn.referName]" 
                        :key="item.value" 
                        :label="item.label"
                        :value="item.value"
                      ></el-option>
                    </el-select>

                    <el-checkbox v-if="cColumn.inputType === 'Checkbox'" 
                      v-model="scope.row[cColumn.key]" 
                      disabled
                      true-label="Y" 
                      false-label="N"
                    ></el-checkbox>


                  </el-form-item>
                  
                </template>
              </el-table-column>
            </el-table>
          
          </virtual-scroll>
            
          </el-tab-pane>
        </el-tabs>
      </el-card>

    </el-form>
  </el-drawer>
</template>