面损表更新

src/views/reportForms/fabric-loss-table/purchaseLeftModal.vue

@@ -0,0 +1,270 @@
+<template>
+  <a-modal
+    title="余纱"
+    v-model="surplusYarnModVis"
+    :confirmLoading="confirmLoading"
+    width="86%"
+    :footer="null"
+  >
+    <!-- tabel 加载 -->
+    <a-spin :spinning="confirmLoading">
+      <!-- 查询  -->
+      <div class="table-page-search-wrapper">
+        <a-form layout="inline" @keyup.enter.native="searchQuery">
+          <a-row :gutter="24">
+            <a-col :md="6" :sm="8">
+              <a-form-item label="委外订单号">
+                <a-input placeholder="请输入委外订单号" v-model="queryParam.ccode"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <a-form-item label="计划号">
+                <a-input placeholder="请输入计划号" v-model="queryParam.cplanCode"></a-input>
+              </a-form-item>
+            </a-col>
+
+            <a-col :md="6" :sm="8">
+              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+                <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+                <a-button type="primary" icon="download" @click="exportExcel" style="margin-left: 8px">导出</a-button>
+                <JsonExcel
+                  :fetch="getExportDataList"
+                  :fields="exportFields"
+                  :header="exportTitle"
+                  name="余纱.xls"
+                  style="display:none"
+                >
+                  <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
+                  <a-button type="primary" icon="download" ref="realExportExcel">导出</a-button>
+                  
+                </JsonExcel>
+                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+                
+              </span>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+
+      <!-- table -->
+      <div>
+        <a-table
+          ref="tableRef"
+          bordered
+          :loading="loading"
+          :columns="surplusYarnColumns"
+          :data-source="surplusYarnData"
+          :pagination="false"
+          :scroll="{ y: 500,x:1500 }"
+          :footer="showTotal"
+        >
+        </a-table>
+        <!-- 导出 打印 返回  -->
+        <a-row style="marginTop:20px;">
+          <a-col :md="24" :sm="12">
+            <span style="float: right;" class="table-operator">
+              <a-button type="primary" @click="backFabricLossTable" icon="rollback">关闭</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { JeecgListMixin } from '@/mixins/JeecgListMixin'
+import JEllipsis from '@/components/jeecg/JEllipsis'
+import JsonExcel from 'vue-json-excel'
+export default {
+  name: 'PurchaseLeftModal', // 余纱 弹框
+  mixins: [JeecgListMixin],
+  components: { JEllipsis, JsonExcel },
+  data() {
+    return {
+      exportTitle:"余纱",
+      // 表头
+      surplusYarnColumns: [
+        {
+          title: '序号',
+          width:80,
+           customRender: (text, record, index) => {
+            if (record.ccode == "合计")
+              return "";
+            else
+              return index + 1;
+           }
+        },
+        {
+          title: '委外订单号',
+          dataIndex: 'ccode',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '批号',
+          dataIndex: 'cbatch',
+          width: 120,
+          className: 'replacecolor'
+        },
+        {
+          title: '使用数量',
+          dataIndex: 'iquantity',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        
+        {
+          title: '计划号',
+          dataIndex: 'cplanCode',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        },
+        {
+          title: '采购单价',
+          dataIndex: 'iprice',
+          width: 120,
+          key: '',
+          className: 'replacecolor'
+        }
+      ],
+      surplusYarnData: [],
+      allDataList:[],
+
+      loading: false, // 表格加载
+      // orderDataform: this.$form.createForm(this),
+      confirmLoading: false,
+      surplusYarnModVis: false,
+      // 查询条件
+      queryParam: {
+        aboardorderNum: '', // aboardorderNum
+        planNum: '' // 计划号
+      }
+    }
+  },
+  // 接收父组件 方法
+  props: {
+    father: {
+      type: Function,
+      default: null
+    }
+  },
+  computed: {
+    // 合计展示
+    totalDataSource(){
+      // 开票成本-衬衣 合计
+      var item = {
+        "ccode":"合计"
+      };
+      var iquantity = 0;
+      for (let row of this.surplusYarnData){
+        iquantity += row.iquantity*1;
+      }
+      
+      item.iquantity= parseFloat(iquantity.toFixed(4));
+      return [item];
+
+    },
+    // 获取导出json定义
+    exportFields(){
+      var ret = {};
+      this.surplusYarnColumns.forEach((record,index)=>{
+        if (record.title != "序号"){
+          ret[record.title] = record.dataIndex;
+        }
+
+      });
+      return ret;
+    }
+  },
+  created() {},
+  watch:{
+    surplusYarnData(){
+      this.$nextTick(()=>{  
+         const dom = this.$refs.tableRef.$el.getElementsByClassName('ant-table-body')[0];
+          dom.addEventListener(
+          'scroll',
+          () => {
+            this.$refs.tableInfo.$el.querySelectorAll(
+                '.ant-table-body'
+            )[0].scrollLeft = dom.scrollLeft
+          },
+          true
+      )
+      })
+    }
+  },
+  methods: {
+    // 第一行 导出
+    handleExportXls() {},
+    // 打印
+    print() {},
+    // 返回
+    backFabricLossTable() {
+      console.log('返回到面料损耗表')
+      // this.$router.push('fabricLoss-table')
+      // this.surplusYarnModVis = false
+      this.close()
+    },
+    // 弹框查询按钮
+    searchQuery() {
+      this.surplusYarnData = this.allDataList.filter(e=>(this.queryParam.ccode == null || e.ccode.toLowerCase().indexOf(this.queryParam.ccode.toLowerCase())>-1) 
+        && (this.queryParam.cplanCode == null || e.cplanCode.toLowerCase().indexOf(this.queryParam.cplanCode.toLowerCase())>-1));
+    },
+    // 重置
+    searchReset() {
+      this.queryParam = {}
+      // this.getShipmentList()
+    },
+    close() {
+      this.$emit('close')
+      this.surplusYarnModVis = false
+    },
+    showTotal(data) {
+      return (
+        <a-table
+          ref="tableInfo"
+          rowKey={Math.random}
+          bordered={false}
+          pagination={false}
+          columns={this.surplusYarnColumns}
+          dataSource={this.totalDataSource || []}
+          showHeader={false}
+          scroll={{x:1500 }}
+        ></a-table>
+      )
+    },
+    // 导出excel
+    exportExcel(){
+      this.$refs.realExportExcel.$el.click();
+    },
+    // 生成导出数据
+    getExportDataList(){
+      return this.surplusYarnData;
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import '~@assets/less/common.less';
+@import '~@assets/less/overwriter.less';
+/deep/ .ant-table-thead > tr > th {
+  text-align: center;
+  // font-weight: 700;
+}
+
+/deep/ .ant-table-tbody {
+  text-align: center;
+}
+
+ /deep/ .ant-table-footer .ant-table-body {
+    overflow: hidden !important;
+  }
+// /deep/ th.replacecolor {
+//   background-color: #ccc;
+// }
+</style>