更新

src/views/WorkshopProcurement/OutsourcingMaterialsInvoice/index.vue

@@ -32,80 +32,38 @@
           type="date"
           placeholder="选择日期"/>
         <el-tooltip :open-delay="1200" effect="dark" content="查询外购备料发票信息" placement="top">
-          <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 10px" @click="total1=0;pageCurrent1=1;pageSize1=10;searchTable1()">查询</el-button>
+          <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 10px" @click="total1=0;pageCurrent1=1;pageSize1=30;searchTable1()">查询</el-button>
         </el-tooltip>
         <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" style="margin-left: 10px" @click="addTable1()">新增发票</el-button>
       </el-row>
     </el-card>
-    <el-card>
+    <el-card style="width: 58%;float: left">
       <el-table
         :data="tableData1"
-        :row-key="getRowKeys"
-        :expand-row-keys="expands"
         size="mini"
         style="margin-top: 3px"
-        height="550px"
+        height="750px"
         stripe
         border
         highlight-current-row
-        @expand-change="searchTable02">
-        <el-table-column type="expand" label="详情">
-          <template slot-scope="scope">
-            <el-table :data="gridData" class="subTableHeader" show-summary stripe border size="mini" style="width: 40%">
-              <el-table-column width="50" align="center" type="index" label="序号"/>
-              <el-table-column min-width="150" align="center" label="供应商">
-                <template slot-scope="scope">
-                  {{ scope.row.供应商名称 }}
-                </template>
-              </el-table-column>
-              <el-table-column min-width="100" align="center" label="到货日期">
-                <template slot-scope="scope">
-                  {{ scope.row.日期.split(' ')[0] }}
-                </template>
-              </el-table-column>
-              <el-table-column label="金额" align="center" prop="到货金额">
-                <template slot-scope="scope">
-                  {{ scope.row.到货金额 }}
-                </template>
-              </el-table-column>
-              <el-table-column min-width="100" align="center" label="备注">
-                <template slot-scope="scope">
-                  {{ scope.row.备注 }}
-                </template>
-              </el-table-column>
-              <el-table-column min-width="100" align="center" label="操作">
-                <template slot-scope="scope">
-                  <el-tooltip effect="dark" content="取消关联" placement="top">
-                    <div style="display: inline-block">
-                      <el-button
-                        type="text"
-                        size="mini"
-                        icon="el-icon-delete"
-                        @click="deleteTable10(scope.row)"/>
-                    </div>
-                  </el-tooltip>
-                </template>
-              </el-table-column>
-            </el-table>
-          </template>
-        </el-table-column>
-        <el-table-column align="center" label="发票状态" min-width="100px">
+        @row-click="searchTable02">
+        <el-table-column align="center" label="发票状态" width="80px">
           <template slot-scope="scope">
             <el-tag v-if="Number(scope.row.是否请款) === 0" type="warning" size="mini">未请款</el-tag>
             <el-tag v-else-if="Number(scope.row.是否请款) === 1" type="primary" size="mini">已请款</el-tag>
           </template>
         </el-table-column>
-        <el-table-column align="center" label="发票号" min-width="120px">
+        <el-table-column align="center" label="发票号" width="120px">
           <template slot-scope="scope">
             {{ scope.row.发票号 }}
           </template>
         </el-table-column>
-        <el-table-column align="center" label="开票时间" prop="开票时间" min-width="100px">
+        <el-table-column align="center" label="开票时间" prop="开票时间" width="100px">
           <template slot-scope="scope">
             {{ scope.row.开票时间 }}
           </template>
         </el-table-column>
-        <el-table-column align="center" label="开票金额" min-width="100px">
+        <el-table-column align="center" label="开票金额" width="80px">
           <template slot-scope="scope">
             {{ scope.row.开票金额 }}
           </template>
@@ -171,29 +129,124 @@
           @current-change="handleCurrentChange1"/>
       </div>
     </el-card>
-    <el-dialog v-el-drag-dialog :title="title1" :visible.sync="dialogVisible1" center style="min-height: 300px" width="400px">
+    <el-card style="float: left;width: 41.3%;margin-left: 5px">
+      <el-table :data="gridData" class="subTableHeader" show-summary stripe border size="mini" style="width: 100%">
+        <el-table-column width="50" align="center" type="index" label="序号"/>
+        <el-table-column min-width="150" align="center" label="供应商">
+          <template slot-scope="scope">
+            {{ scope.row.供应商名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column width="100" align="center" label="到货日期">
+          <template slot-scope="scope">
+            {{ scope.row.日期.split(' ')[0] }}
+          </template>
+        </el-table-column>
+        <el-table-column label="金额" align="center" width="80" prop="到货金额">
+          <template slot-scope="scope">
+            {{ scope.row.到货金额 }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="100" align="center" label="备注">
+          <template slot-scope="scope">
+            {{ scope.row.备注 }}
+          </template>
+        </el-table-column>
+        <el-table-column min-width="100" align="center" label="操作">
+          <template slot-scope="scope">
+            <el-tooltip effect="dark" content="取消关联" placement="top">
+              <div style="display: inline-block">
+                <el-button
+                  type="text"
+                  size="mini"
+                  icon="el-icon-delete"
+                  @click="deleteTable10(scope.row)"/>
+              </div>
+            </el-tooltip>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-dialog v-el-drag-dialog :title="title1" :visible.sync="dialogVisible1" center style="min-height: 300px" width="1400px">
       <el-form ref="form1" :model="form1" :rules="rules1" label-width="110px">
-        <el-form-item label="供应商" prop="supplierNameValue">
-          <el-select v-model="form1.supplierNameValue" placeholder="供应商" size="small" filterable>
-            <el-option
-              v-for="item in supplierNames"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"/>
-          </el-select>
-        </el-form-item>
-        <el-form-item label="发票号" prop="money">
-          <el-input v-model="form1.Number" size="small" placeholder="发票号"/>
-        </el-form-item>
-        <el-form-item label="开票时间" prop="invoiceTime">
-          <el-date-picker v-model="form1.invoiceTime" size="small" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"/>
-        </el-form-item>
-        <el-form-item label="开票金额" prop="money">
-          <el-input v-model="form1.money" size="small" placeholder="开票金额"/>
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="form1.remark" size="small"/>
-        </el-form-item>
+        <div style="width: 25%;float: left;margin-top: 5px">
+          <div style="background: gainsboro">
+            <el-form-item label="供应商" prop="supplierNameValue">
+              <el-select v-model="form1.supplierNameValue" placeholder="供应商" size="small" filterable @change="Name=form1.supplierNameValue;pageCurrent4=1;pageSize4=10;total4=0;searchTable4()">
+                <el-option
+                  v-for="item in supplierNames"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"/>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="发票号" prop="money">
+              <el-input v-model="form1.Number" size="small" placeholder="发票号"/>
+            </el-form-item>
+            <el-form-item label="开票时间" prop="invoiceTime">
+              <el-date-picker v-model="form1.invoiceTime" size="small" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="选择日期"/>
+            </el-form-item>
+            <el-form-item label="开票金额" prop="money">
+              <el-input v-model="form1.money" size="small" placeholder="开票金额"/>
+            </el-form-item>
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form1.remark" size="small"/>
+            </el-form-item>
+          </div>
+        </div>
+        <div style="width: 74%;float: left;margin-left: 5px">
+          <div>
+            <span style="margin-left: 10px">时间段:</span>
+            <el-date-picker
+              v-model="dateRange"
+              size="small"
+              type="daterange"
+              align="center"
+              value-format="yyyy-MM-dd"
+              format="yyyy-MM-dd"
+              range-separator="～"
+              style="width:260px"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"/>
+            <el-tooltip :open-delay="1200" effect="dark" content="查询到货单" placement="top">
+              <el-button type="success" size="small" icon="el-icon-search" style="margin-left: 10px" @click="pageCurrent4=1;pageSize4=10;total4=0;searchTable4()">查询</el-button>
+            </el-tooltip>
+          </div>
+          <el-table v-loading="" :data="tableData4" border stripe style="max-height: 460px;" height="230px" size="mini" highlight-current-row @selection-change="handleSelectionChange">
+            <el-table-column type="selection" width="55" align="center"/>
+            <el-table-column label="供应商" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.供应商名称 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="到货日期" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.日期.split(' ')[0] }}
+              </template>
+            </el-table-column>
+            <el-table-column label="金额" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.到货金额 }}
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" align="center" show-overflow-tooltip>
+              <template slot-scope="scope">
+                {{ scope.row.备注 }}
+              </template>
+            </el-table-column>
+          </el-table>
+          <div class="block">
+            <el-pagination
+              :current-page="pageCurrent4"
+              :page-sizes="[10, 20, 30, 40]"
+              :page-size="pageSize4"
+              :total="total4"
+              style="display:inline-block;width:50%"
+              layout="total, sizes, prev, pager, next, jumper"
+              @size-change="handleSizeChange4"
+              @current-change="handleCurrentChange4"/>
+          </div>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button size="small" @click="dialogVisible1 = false">取消</el-button>
@@ -282,7 +335,7 @@ export default {
       Name: '',
       arrest: [],
       pageCurrent1: 1,
-      pageSize1: 10,
+      pageSize1: 30,
       total1: 0,
       pageCurrent4: 1,
       pageSize4: 10,
@@ -303,7 +356,6 @@ export default {
       dialogVisible: false,
       dialogVisible1: false,
       title1: '',
-      expands: [],
       form1: {
         supplierNameValue: '',
         Number: '',
@@ -399,29 +451,11 @@ export default {
       this.searchTable4()
     },
     searchTable02(row) { // 查看详情（发票包含的合同）
-      if (this.a === 1) {
-        this.expands.push(row.发票流水号)
-        this.b = row.发票流水号
-        this.a = 0
-      } else {
-        if (this.b === row.发票流水号) {
-          this.expands = []
-          this.a = 1
-        } else {
-          this.expands = []
-          this.expands.push(row.发票流水号)
-          this.a = 0
-          this.b = row.发票流水号
-        }
-      }
       this.发票流水号 = row.发票流水号
       searchInvoiceDetail(this.发票流水号).then(response => {
         this.gridData = response.data
       })
     },
-    getRowKeys(row) {
-      return row.发票流水号
-    },
     addTable1() {
       if (this.$refs['form1'] !== undefined) {
         this.$refs['form1'].resetFields()
@@ -438,13 +472,23 @@ export default {
     submitAdd1(formName) {
       this.$refs[formName].validate((valid) => {
         if (valid) {
-          addInvoice(this.form1.invoiceTime, this.form1.money, this.form1.Number, this.form1.remark, this.form1.supplierNameValue).then(response => {
-            if (response.data[0].result === '1') {
-              this.$message.success('增加成功')
-              this.dialogVisible1 = false
-              this.searchTable1()
-            } else { this.$message.error('增加失败') }
-          })
+          if (this.arrest.length === 0) {
+            this.$message.warning('请勾选需要关联的到货单')
+          } else {
+            this.到货单流水号组 = []
+            this.arrest.map(v => {
+              this.到货单流水号组.push(v.到货单流水号)
+            })
+            addInvoice(this.form1.invoiceTime, this.form1.money, this.form1.Number, this.form1.remark, this.form1.supplierNameValue, this.到货单流水号组).then(response => {
+              if (response.data[0].result === '1') {
+                this.$message.success('增加成功')
+                this.dialogVisible1 = false
+                this.searchTable1()
+              } else {
+                this.$message.error('增加失败')
+              }
+            })
+          }
         } else {
           console.log('error submit!!')
           return false
@@ -526,7 +570,9 @@ export default {
           if (response.data[0].result === '1') {
             this.$message.success('关联成功')
             this.dialogVisible = false
-            this.tableData4 = []
+            searchInvoiceDetail(this.发票流水号).then(response => {
+              this.gridData = response.data
+            })
           } else { this.$message.error('关联失败') }
         })
       }