发票验证弹窗样式问题修改

front-vue/src/assets/styles/element-ui.scss

@@ -188,3 +188,6 @@
 .zap-form-input--default{
   width: 256px !important;
 }
+.el-form-item__label{
+  font-weight: 500 !important;
+}

front-vue/src/assets/styles/huyi.scss

@@ -408,3 +408,6 @@
   margin-left: 8px;
 }
 
+.text-right{
+  text-align: right;
+}

front-vue/src/components/InvoiceVerification/index.vue

@@ -1,178 +1,259 @@
 <template>
-<el-dialog title="发票验真" :visible="isOpen" width="1050px" append-to-body @close="closeHandler">
+  <el-dialog title="发票验真" :visible="isOpen" width="1050px" append-to-body @close="closeHandler">
     <el-row class="zap-bill-dialog" type="flex">
-        <div width="224px" style="background-color: white;flex: 0 0 224px;">
-            <el-button style="width: 224px;" type="primary" @click="openUploadInvoice">上传发票</el-button>
-            <div class="zap-bill-dialog__main">
-                <div class="zap-bill-dialog__title">
-                    <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
-                    <label>已上传发票列表</label>
-                </div>
-                <div class="zap-bill-dialog__item" :style="
-                    item.ziiCheckStt == '1'
-                      ? { 'background-color': '#a8f87f' }
-                      : {}
-                  " v-for="(item, index) in fileList" :label="item" :key="index">
-                    <i class="el-icon-question" style="color: blue" v-if="item.ziiCheckStt == '0'"><label @click="changeInvoice(item)">
-                            <el-link :underline="false">{{
-                        item.name
-                      }}</el-link>
-                        </label></i>
-                    <i class="el-icon-success" style="color: green" v-if="item.ziiCheckStt == '1'"><label @click="changeInvoice(item)">
-                            <el-link :underline="false">{{
-                        item.name
-                      }}</el-link>
-                        </label></i>
-                    <i class="el-icon-error" style="color: red" v-if="item.ziiCheckStt == '2' || item.ziiCheckStt == '3'"><label @click="changeInvoice(item)">
-                            <el-link :underline="false">{{
-                        item.name
-                      }}</el-link>
-                        </label><label>{{ checkSttFormat(item) }}</label></i>
-                    <el-link style="float: right" type="primary" :underline="false" @click="delInvoice(item)">删除</el-link>
-                </div>
-            </div>
-            <div style="text-align: center; margin-top: 20px">
-                <el-button type="primary" @click="toCheckAgian()">再次验证</el-button>
-                <el-button type="primary" @click="submitCheck()">保存并上传</el-button>
-            </div>
-        </div>
-        <div style="margin-left: 32px;">
-            <el-row height="232px">
-                <el-image style="width: 700px; height: 232px" :src="invoice.url" fit="scale-down" @click="invoicePictureCardPreview(invoice)"></el-image>
-                <p v-if="invoice.zbiName && invoice.ziiCheckStt == '3'" style="text-align: center; color: red">
-                    发票重复，已存在名称为“{{ invoice.zbiName }}”的往来账款中!
-                </p>
-            </el-row>
-            <el-row class="mt20">
-                <el-form ref="invoice" label-width="auto" :disabled="invoice.ziiCheckStt == '1'">
-                    <el-col :span="12">
-                        <el-form-item label="发票代码：">
-                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiNo" maxlength="20" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="发票号码：">
-                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiNumber" maxlength="20" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="开票日期：">
-                            <el-date-picker class="zap-bill-dialog__input" v-model="invoice.ziiDate" value-format="yyyy-MM-dd" type="date" placeholder="选择日期">
-                            </el-date-picker>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="购货纳税人编号：">
-                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiPurchaserNo" maxlength="20" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="销货纳税人编号：">
-                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiSellerNo" maxlength="20" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="发票金额：">
-                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiTotalAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiTotalAmount,'0')" />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="税价金额：">
-                            <el-input class="zap-bill-dialog__input" v-model="invoice.ziiAmount" maxlength="16" @input.native="changeRate($event,invoice.ziiAmount,'1')" />
-                        </el-form-item>
-                    </el-col>
-                </el-form>
-            </el-row>
-            <el-footer>
-                <el-button type="primary" @click="queryDouble()" style="float: right">确定</el-button>
-            </el-footer>
+      <div width="224px" style="background-color: white;flex: 0 0 224px;">
+        <el-button style="width: 224px;" type="primary" @click="openUploadInvoice">上传发票</el-button>
+        <div class="zap-bill-dialog__main">
+          <div class="zap-bill-dialog__title">
+            <el-checkbox :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
+            <label>已上传发票列表</label>
+          </div>
+          <div
+            class="zap-bill-dialog__item"
+            :style="
+              item.ziiCheckStt == '1' ? { 'background-color': '#a8f87f' } : {}
+            "
+            v-for="(item, index) in fileList"
+            :label="item"
+            :key="index"
+            @click="changeInvoice(item)"
+          >
+            <template v-if="item.ziiCheckStt == '0'">
+              <el-link class="zap-bill-dialog__name" :underline="false">{{ item.name }}</el-link>
+              <i class="el-icon-question" style="color: blue"></i>
+              <span class="zap-bill-dialog__result"></span>
+            </template>
+
+            <template v-if="item.ziiCheckStt == '1'">
+              <el-link class="zap-bill-dialog__name" :underline="false">{{ item.name }}</el-link>
+              <i class="el-icon-success" style="color: green"></i>
+              <span class="zap-bill-dialog__result"></span>
+            </template>
+
+            <template v-if="item.ziiCheckStt == '2' || item.ziiCheckStt == '3'">
+              <el-link class="zap-bill-dialog__name" :underline="false">{{ item.name }}</el-link>
+              <i class="el-icon-error" style="color: red"></i>
+              <span class="zap-bill-dialog__result">{{ checkSttFormat(item) }}</span>
+            </template>
+
+            <el-link
+              class="zap-bill-dialog__delete"
+              type="primary"
+              :underline="false"
+              @click="delInvoice(item)"
+            >删除</el-link>
+          </div>
         </div>
+      </div>
+      <div style="margin-left: 32px;">
+        <el-row height="232px">
+          <el-image
+            style="width: 700px; height: 232px"
+            :src="invoice.url"
+            fit="scale-down"
+            @click="invoicePictureCardPreview(invoice)"
+          ></el-image>
+          <p
+            v-if="invoice.zbiName && invoice.ziiCheckStt == '3'"
+            style="text-align: center; color: red"
+          >发票重复，已存在名称为“{{ invoice.zbiName }}”的往来账款中!</p>
+        </el-row>
+        <el-row class="mt20">
+          <el-form ref="invoice" label-width="auto" :disabled="invoice.ziiCheckStt == '1'">
+            <el-col :span="12">
+              <el-form-item label="发票代码">
+                <el-input class="zap-bill-dialog__input" v-model="invoice.ziiNo" maxlength="20" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" class="text-right">
+              <el-form-item label="开票日期" label-width="150px">
+                <el-date-picker
+                  class="zap-bill-dialog__input"
+                  v-model="invoice.ziiDate"
+                  value-format="yyyy-MM-dd"
+                  type="date"
+                  placeholder="选择日期"
+                ></el-date-picker>
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="发票号码">
+                <el-input
+                  class="zap-bill-dialog__input"
+                  v-model="invoice.ziiNumber"
+                  maxlength="20"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" class="text-right">
+              <el-form-item label="发票金额" label-width="150px">
+                <el-input
+                  class="zap-bill-dialog__input"
+                  v-model="invoice.ziiTotalAmount"
+                  maxlength="16"
+                  @input.native="
+                    changeRate($event, invoice.ziiTotalAmount, '0')
+                  "
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="购货纳税人编号">
+                <el-input
+                  class="zap-bill-dialog__input"
+                  v-model="invoice.ziiPurchaserNo"
+                  maxlength="20"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12" class="text-right">
+              <el-form-item label="税价金额" label-width="150px">
+                <el-input
+                  class="zap-bill-dialog__input"
+                  v-model="invoice.ziiAmount"
+                  maxlength="16"
+                  @input.native="changeRate($event, invoice.ziiAmount, '1')"
+                />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="销货纳税人编号">
+                <el-input
+                  class="zap-bill-dialog__input"
+                  v-model="invoice.ziiSellerNo"
+                  maxlength="20"
+                />
+              </el-form-item>
+            </el-col>
+          </el-form>
+        </el-row>
+      </div>
+    </el-row>
+    <el-row type="flex" justify="space-between" style="padding-left: 40px;">
+      <div style="text-align: left;">
+        <el-button type="primary" @click="toCheckAgian()">再次验证</el-button>
+        <el-button type="primary" @click="submitCheck()">保存并上传</el-button>
+      </div>
+      <el-button type="primary" @click="queryDouble()" style="float: right">确定</el-button>
     </el-row>
-</el-dialog>
+  </el-dialog>
 </template>
 
 <script>
 export default {
-    name: "InvoiceVerification",
-    props: ['open', 'isIndeterminate', 'checkSttOptions', 'fileList', 'invoice'],
-    computed: {
-      isOpen () {
-        return this.open
+  name: "InvoiceVerification",
+  props: ["open", "isIndeterminate", "checkSttOptions", "fileList", "invoice"],
+  computed: {
+    isOpen() {
+      return this.open;
+    }
+  },
+  methods: {
+    openUploadInvoice() {
+      this.$emit("openUploadInvoice");
+    },
+    handleCheckAllChange(val) {
+      this.$emit("handleCheckAllChange", val);
+    },
+    changeInvoice(item) {
+      this.$emit("changeInvoice", item);
+    },
+    delInvoice(item) {
+      this.$emit("delInvoice", item);
+    },
+    toCheckAgian() {
+      this.$emit("toCheckAgian");
+    },
+    submitCheck() {
+      this.$emit("submitCheck");
+    },
+    invoicePictureCardPreview(invoice) {
+      this.$emit("invoicePictureCardPreview", invoice);
+    },
+    queryDouble() {
+      this.$emit("queryDouble");
+    },
+    //金额校验格式
+    changeRate(e, input, type) {
+      e.target.value = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
+      this.input = e.target.value;
+      if ("0" == type) {
+        this.invoice.ziiTotalAmount = e.target.value;
+      } else if ("1" == type) {
+        this.invoice.ziiAmount = e.target.value;
       }
     },
-    methods: {
-        openUploadInvoice() {
-            this.$emit('openUploadInvoice')
-        },
-        handleCheckAllChange(val) {
-            this.$emit('handleCheckAllChange', val)
-        },
-        changeInvoice(item) {
-            this.$emit('changeInvoice', item)
-        },
-        delInvoice(item) {
-            this.$emit('delInvoice', item)
-        },
-        toCheckAgian() {
-            this.$emit('toCheckAgian')
-        },
-        submitCheck() {
-            this.$emit('submitCheck')
-        },
-        invoicePictureCardPreview(invoice) {
-            this.$emit('invoicePictureCardPreview', invoice)
-        },
-        queryDouble () {
-          this.$emit('queryDouble')
-        },
-        //金额校验格式
-        changeRate(e, input, type) {
-            e.target.value = (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
-            this.input = e.target.value;
-            if ("0" == type) {
-                this.invoice.ziiTotalAmount = e.target.value;
-            } else if ("1" == type) {
-                this.invoice.ziiAmount = e.target.value;
-            }
-        },
-        //校验结果字典
-        checkSttFormat(row, column) {
-            return this.selectDictLabel(this.checkSttOptions, row.ziiCheckStt);
-        },
-        closeHandler () {
-          this.$emit('close')
-        }
+    //校验结果字典
+    checkSttFormat(row, column) {
+      return this.selectDictLabel(this.checkSttOptions, row.ziiCheckStt);
+    },
+    closeHandler() {
+      this.$emit("close");
     }
-}
+  }
+};
 </script>
 
 <style lang="scss">
 .zap-bill-dialog {
-    padding: 25px 40px 35px;
+  padding: 25px 40px 2px;
 }
 
 .zap-bill-dialog__main {
-    height: 408px;
-    margin-top: 16px;
-    border-radius: 4px;
-    border: 1px dashed #4280F2;
+  height: 408px;
+  margin-top: 16px;
+  border-radius: 4px;
+  border: 1px dashed #4280f2;
 }
 
 .zap-bill-dialog__title {
-    height: 32px;
-    line-height: 32px;
-    text-align: center;
-    font-size: 12px;
-    color: #4280F2;
-    background-color: #EBF3FF;
+  height: 32px;
+  line-height: 32px;
+  text-align: center;
+  font-size: 12px;
+  color: #4280f2;
+  background-color: #ebf3ff;
 }
 
 .zap-bill-dialog__input {
-    width: 200px !important;
+  width: 200px !important;
 }
 
 .zap-bill-dialog__item {
-    padding: 18px 16px;
-    font-size: 14px;
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  font-size: 14px;
+  .el-icon-success,
+  .el-icon-question,
+  .el-icon-error {
+    margin-right: 8px;
+    font-size: 16px !important;
+  }
+
+  .zap-bill-dialog__result {
+    flex: 1;
+    width: 48px;
+    line-height: 20px;
+    font-size: 12px;
+    color: #ff2f2f;
+  }
+}
+
+.zap-bill-dialog__name {
+  margin-right: 16px;
+
+  .el-link--inner {
+    flex: 0 0 52px;
+    width: 52px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.zap-bill-dialog__delete {
+  font-size: 14px;
+  color: #4280f2;
+  line-height: 20px;
 }
 </style>

front-vue/src/views/service/repayment/repayment.vue

@@ -8,27 +8,36 @@
         :tableId="tableId"
         @query="handleQuery"
         @reset="resetQuery">
-        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
-            <el-form-item label="类型" prop="type" size="medium">
-                <el-select v-model="queryParams.type" placeholder="请选择查询字段" clearable>
-                    <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
-                </el-select>
-            </el-form-item>
-            <el-form-item prop="value" size="medium">
-                <el-input v-model="queryParams.value" placeholder="请输入关键字模糊查询" clearable maxlength="30" @keyup.enter.native="handleQuery" />
-            </el-form-item>
-            <el-form-item label="承诺还款日期" prop="repaymentDate" size="medium">
-                <el-date-picker
-                    clearable
-                    unlink-panels
-                    v-model="queryParams.repaymentDate"
-                    value-format="yyyy-MM-dd"
-                    format="yyyy-MM-dd"
-                    type="daterange"
-                    range-separator="-"
-                    start-placeholder="开始日期"
-                    end-placeholder="结束日期"></el-date-picker>
-            </el-form-item>
+        <el-form :model="queryParams" ref="queryForm" v-show="showSearch" label-width="80px">
+            <el-row type="flex" style="flex-wrap:wrap;">
+                <el-form-item class="zap-flex-1" label="类型" prop="type" size="medium">
+                    <el-select class="zap-form-input--samll" v-model="queryParams.type" placeholder="请选择查询字段" clearable>
+                        <el-option v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" :value="dict.dictValue" />
+                    </el-select>
+                </el-form-item>
+                <el-form-item class="zap-flex-1 ml24" prop="value" size="medium" label-width="0">
+                    <el-input
+                        class="zap-form-input--default"
+                        v-model="queryParams.value"
+                        placeholder="请输入关键字模糊查询"
+                        clearable
+                        maxlength="30"
+                        @keyup.enter.native="handleQuery" />
+                </el-form-item>
+                <el-form-item class="zap-flex-1" label="到期日期" prop="repaymentDate" size="medium">
+                    <el-date-picker
+                        class="zap-form-input--medium"
+                        clearable
+                        unlink-panels
+                        v-model="queryParams.repaymentDate"
+                        value-format="yyyy-MM-dd"
+                        format="yyyy-MM-dd"
+                        type="daterange"
+                        range-separator="-"
+                        start-placeholder="开始日期"
+                        end-placeholder="结束日期"></el-date-picker>
+                </el-form-item>
+            </el-row>
         </el-form>
         <el-form :model="amountQueryParams" ref="amountQueryForm" :inline="true" v-show="showSearch" label-width="auto">
             <el-row type="flex" align="middle">
@@ -204,10 +213,10 @@
                     </el-table-column>
                 </el-table>
                 <statistical-data>
-                <span class="label">总合计:<span class="value">¥{{allAmount}}</span></span>
-                <span class="label">待还款:¥{{dhkAmount}}</span>
-                <span class="label">已还款:¥{{yhkAmount}}</span>
-                <span class="label">逾期:¥{{yyqAmount}}</span>
+                    <span class="label">总合计:<span class="value">¥{{allAmount}}</span></span>
+                    <span class="label">待还款:¥{{dhkAmount}}</span>
+                    <span class="label">已还款:¥{{yhkAmount}}</span>
+                    <span class="label">逾期:¥{{yyqAmount}}</span>
                 </statistical-data>
                 <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
             </div>
@@ -253,10 +262,10 @@
                     </template>
                 </el-table-column>
             </el-table>
-              <statistical-data>
+            <statistical-data>
                 <span class="label">总合计:<span class="value">¥{{allAmount}}</span></span>
                 <span class="label">待还款:¥{{dhkAmount}}</span>
-                </statistical-data>
+            </statistical-data>
             <pagination v-show="total>0" :total="total1" :page.sync="unRepayment.pageNum" :limit.sync="unRepayment.pageSize" @pagination="getList" />
         </el-tab-pane>
         <el-tab-pane label="已还款">
@@ -292,13 +301,13 @@
                     </template>
                 </el-table-column>
             </el-table>
-                <statistical-data>
+            <statistical-data>
                 <span class="label">总合计:<span class="value">¥{{allAmount}}</span></span>
                 <span class="label">已还款:¥{{yhkAmount}}</span>
-                </statistical-data>
+            </statistical-data>
             <pagination v-show="total>0" :total="total2" :page.sync="repayment.pageNum" :limit.sync="repayment.pageSize" @pagination="getList" />
         </el-tab-pane>
-        <el-tab-pane label="逾期">
+        <el-tab-pane label="已逾期">
             <div class="zap-content">
                 <el-button type="primary" icon="el-icon-export" @click="handleExport" v-hasPermi="['service:repayment:export']">导出待还款数据</el-button>
             </div>
@@ -339,10 +348,10 @@
                     </template>
                 </el-table-column>
             </el-table>
-              <statistical-data>
+            <statistical-data>
                 <span class="label">总合计:<span class="value">¥{{allAmount}}</span></span>
                 <span class="label">逾期:¥{{yyqAmount}}</span>
-                </statistical-data>
+            </statistical-data>
             <pagination v-show="total>0" :total="total3" :page.sync="overdue.pageNum" :limit.sync="overdue.pageSize" @pagination="getList" />
         </el-tab-pane>
 
@@ -617,7 +626,7 @@ export default {
         /** 查询所有还款列表 */
         getList() {
             this.loading = true;
-           listAmount().then(response => {
+            listAmount().then(response => {
                 debugger
                 this.allAmount = response.data.allAmount;
                 this.dhkAmount = response.data.dhkAmount;
@@ -641,7 +650,7 @@ export default {
         getUnpayList() {
             this.loading = true;
             this.unRepayment.status = "00";
-                   listAmount().then(response => {
+            listAmount().then(response => {
                 debugger
                 this.allAmount = response.data.allAmount;
                 this.dhkAmount = response.data.dhkAmount;
@@ -665,7 +674,7 @@ export default {
         getRepayList() {
             this.loading = true;
             this.repayment.status = "01";
-                   listAmount().then(response => {
+            listAmount().then(response => {
                 debugger
                 this.allAmount = response.data.allAmount;
                 this.dhkAmount = response.data.dhkAmount;
@@ -689,7 +698,7 @@ export default {
         getOverdueList() {
             this.loading = true;
             this.overdue.status = "02";
-                   listAmount().then(response => {
+            listAmount().then(response => {
                 debugger
                 this.allAmount = response.data.allAmount;
                 this.dhkAmount = response.data.dhkAmount;
@@ -1056,6 +1065,7 @@ export default {
 .zap-title {}
 
 .zap-repaid__select {
+
     ::v-deep .el-select,
     ::v-deep .el-input__inner {
         width: 105px;
@@ -1065,11 +1075,13 @@ export default {
         background-color: #FFF6F6;
         border-radius: 16px;
     }
-    ::v-deep .el-select .el-input.is-focus .el-input__inner{
+
+    ::v-deep .el-select .el-input.is-focus .el-input__inner {
         border-color: #FF2F2F;
     }
+
     ::v-deep .el-input__icon,
-    ::v-deep ::placeholder{
+    ::v-deep ::placeholder {
         color: #FF2F2F;
     }
 }