优化

src/views/bpm/handleTask/components/purchaseOrder/outSourceSendCk/detailDialog2.vue

@@ -0,0 +1,259 @@
+<template>
+  <div>
+    <el-form ref="form" :model="form" label-width="130px">
+      <headerTitle title="发货信息"></headerTitle>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item
+            label="委外申请单编码："
+            prop="code"
+            style="margin-bottom: 22px"
+          >
+            {{ form.code }}
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="采购订单编码："
+            prop="orderNo"
+            style="margin-bottom: 22px"
+          >
+            {{ form.orderNo }}
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item
+            label="外协单位："
+            prop="contactName"
+            style="margin-bottom: 22px"
+          >
+            {{ form.supplierName }}
+          </el-form-item>
+        </el-col>
+
+        <el-col :span="12">
+          <el-form-item
+            label="外协单位联系人："
+            prop="linkName"
+            style="margin-bottom: 22px"
+          >
+            {{ form.linkName }}
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="计价方式：" style="margin-bottom: 22px">
+            {{ form.pricingWay == 1 ? '按数量计费' : '按重量计费' }}
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="外协单位电话："
+            prop="linkPhone"
+            style="margin-bottom: 22px"
+          >
+            {{ form.linkPhone }}
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item
+            label="车辆号："
+            prop="carNo"
+            style="margin-bottom: 22px"
+          >
+            {{ form.carNo }}
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item
+            label="送货单号："
+            prop="sendNoteNo"
+            style="margin-bottom: 22px"
+          >
+            {{ form.sendNoteNo }}
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item
+            label="订单类型："
+            prop="sourceTypeName"
+            style="margin-bottom: 22px"
+          >
+            {{ form.sourceTypeName }}
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item prop="files" label="附件：">
+            <div v-if="form.files && form.files?.length">
+              <el-link
+                v-for="link in form.files"
+                :key="link.id"
+                type="primary"
+                :underline="false"
+                @click="downloadFile(link)"
+              >
+                {{ link.name }}
+              </el-link>
+            </div>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12"> </el-col>
+      </el-row>
+    </el-form>
+
+    <headerTitle title="产品清单"></headerTitle>
+    <ele-pro-table
+      ref="table"
+      :needPage="false"
+      :columns="competAnalysisListcolumns"
+      :toolkit="[]"
+      :datasource="detailData.detailList"
+      row-key="id"
+    >
+      <!-- <template v-slot:toolbar>
+       <div class="headbox">
+       <span class="amount">总计：{{detailData.totalAmount}}元</span>
+       <span class="amount">应付金额：{{detailData.payAmount}}元</span>
+     </div>
+     </template> -->
+      <template v-slot:technicalDrawings="{ row }">
+        <div v-if="row.technicalDrawings && row.technicalDrawings?.length">
+          <el-link
+            v-for="link in row.technicalDrawings"
+            :key="link.id"
+            type="primary"
+            :underline="false"
+            @click="downloadFile(link)"
+          >
+            {{ link.name }}
+          </el-link>
+        </div>
+      </template>
+    </ele-pro-table>
+  </div>
+</template>
+
+<script>
+  import { getFile } from '@/api/system/file';
+  import { getById } from '@/api/bpm/components/outsourcedWarehousing/index';
+
+  export default {
+    props: {
+      businessId: {
+        default: ''
+      }
+    },
+    data() {
+      return {
+        detailId: '',
+        form: {},
+        detailData: {},
+        competAnalysisListcolumns: [
+          {
+            width: 45,
+            type: 'index',
+            columnKey: 'index',
+            align: 'center',
+            fixed: 'left'
+          },
+          {
+            minWidth: 140,
+            prop: 'categoryName',
+            label: '名称',
+            slot: 'categoryName',
+            align: 'center'
+          },
+          {
+            minWidth: 120,
+            prop: 'categoryCode',
+            label: '编码',
+            slot: 'categoryCode',
+            align: 'center'
+          },
+          {
+            minWidth: 100,
+            prop: 'categoryLevelName',
+            label: '类型',
+            slot: 'categoryLevelName',
+            align: 'center'
+          },
+          {
+            width: 160,
+            prop: 'brandNum',
+            label: '牌号',
+            slot: 'brandNum',
+            align: 'center'
+          },
+          {
+            width: 120,
+            prop: 'modelType',
+            label: '型号',
+            slot: 'modelType',
+            align: 'center'
+          },
+          {
+            width: 120,
+            prop: 'specification',
+            label: '规格',
+            slot: 'specification',
+            align: 'center'
+          },
+          {
+            width: 120,
+            prop: 'totalCount',
+            label: '数量',
+            slot: 'totalCount',
+            align: 'center'
+          }
+        ]
+      };
+    },
+    created() {
+      this.getDetailData(this.businessId);
+    },
+    methods: {
+      downloadFile(file) {
+        getFile({ objectName: file.storePath }, file.name);
+      },
+      async getDetailData(id) {
+        this.loading = true;
+        const data = await getById(id);
+        this.loading = false;
+        if (data) {
+          this.form = data;
+          this.detailData = data;
+        }
+      },
+      getTableValue() {
+        return Promise.resolve(this.form);
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .ele-dialog-form {
+    .el-form-item {
+      margin-bottom: 10px;
+    }
+  }
+
+  .headbox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    .amount {
+      font-size: 14px;
+      font-weight: bold;
+      margin-right: 20px;
+    }
+  }
+</style>