加投结算管理增加结算功能

src/views/FinancialManagement/AddInvestment.vue

@@ -1,28 +1,8 @@
 <template>
     <div>
         <templateTable :formList="formList" :searchData.sync="searchData" :tableConfig="tableConfig" :data="tableData"
-        @selectionChange="selectionChange"
-            @getList="getList" :btnGroup="btnGroup" @handleSearchList="handleSearchList"  :pagination="page">
-            <template slot="批量结算">
-                <el-upload
-                style="display: inline-block"
-                action="#"
-                :show-file-list="false"
-                class="upload-demo"
-                :limit="1"
-                :auto-upload="false"
-                :on-change="drivingupload"
-                ref="upload1"
-                accept=".png, .jpg, .jpeg"
-                >
-                <el-button
-                    size="small"
-                    type="primary"
-                    :disabled="selectionList.length == 0"
-                    >批量修改</el-button
-                >
-                </el-upload>
-            </template>
+            @selectionChange="selectionChange" @getList="getList" :btnGroup="btnGroup" @handleSearchList="handleSearchList"
+            :pagination="page">
         </templateTable>
         <el-dialog title="编辑" width="60%" :visible.sync="dialogVisibleadd">
             <templateForm ref="templateForm" :ruleForm="ruleForm" :formData="formData" :inline="false" :rules="rules"
@@ -32,6 +12,19 @@
                 <el-button type="primary" size="small" @click="sumbit">确 定</el-button>
             </span>
         </el-dialog>
+        <el-dialog :visible.sync="dialogVisibleradio" width="30%">
+            <el-upload style="margin-bottom: 10px" class="upload-demo" action="#" :limit="1" accept=".png, .jpg, .jpeg"
+                :auto-upload="false" :on-change="drivingupload" :show-file-list="false" list-type="picture-card"
+                ref="upload1">
+                <img v-if="imageUrl" :src="imageUrl" class="avatar">
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                <div slot="tip" class="el-upload__tip">请上传凭证</div>
+            </el-upload>
+            <span slot="footer" class="dialog-footer">
+                <el-button size="small" @click="dialogVisibleradio = false">取消</el-button>
+                <el-button size="small" type="primary" @click="settlement">确定</el-button>
+            </span>
+        </el-dialog>
     </div>
 </template>
 <script>
@@ -43,7 +36,9 @@ export default {
     components: { templateTable, templateForm },
     data() {
         return {
-            selectionList:[],
+            imageUrl: '',
+            dialogVisibleradio: false,
+            selectionList: [],
             formData: {},
             dialogVisible: false,
             dialogVisibleadd: false,
@@ -67,7 +62,10 @@ export default {
                 },
                 {
                     name: '批量结算',
-                    slot: true,
+                        disabled:()=>{
+                            return this.selectionList.length==0
+                        },
+                    click: () => this.batch()
                 }
             ],
             formList: [
@@ -372,7 +370,7 @@ export default {
                 loading: true,
                 isPaginationShow: true,
                 operationWidth: 300,
-        isCheckBox: true,
+                isCheckBox: true,
                 optBtns: [
                     {
                         type: "primary",
@@ -401,7 +399,8 @@ export default {
 
                 ],
             },
-            seachData: {}
+            seachData: {},
+            voucherNumber: ''
         };
     },
     created() {
@@ -410,37 +409,55 @@ export default {
     },
     methods: {
         selectionChange(val, ref) {
-      this.selectionList = val;
-    },
+            if (val.length!==0) {
+                if (val.find(e=>e.settleStatus == 0) ) {
+                    this.selectionList = val;
+                }
+                else {
+                    this.$message({
+                        message: '请选择未结算的数据',
+                        type: 'warning'
+                    });
+                }
+            }
+
+        },
         drivingupload(file, fileList) {
-      this.$refs.upload1.clearFiles();
-      const params = new FormData(); // 声明formData数据类型
-      params.append("multipartFile", file.raw);
-      params.append("type", "image");
-      this.$api.letter.uploadFile(params).then((res) => {
-        if (res.code == "200") {
-          this.$api.sys
-            .sysChannelCostSettle({
-                voucherNumber: res.data.id,
-              ids: this.selectionList.map((val) => val.id),
-            })
-            .then((res) => {
-              if (res.code == 200) {
-                this.$message({
-                  message: res.msg || "保存成功",
-                  type: "success",
-                });
-                this.getList();
-                this.selectionList = [];
-              } else {
-                this.$message.error(res.msg);
-              }
+            this.$refs.upload1.clearFiles();
+            let file1 = file.raw;
+            let files = window.URL.createObjectURL(file1); //转临时路径
+            this.imageUrl = files;
+            const params = new FormData(); // 声明formData数据类型
+            params.append("multipartFile", file1);
+            params.append("type", "image");
+            this.$api.letter.uploadFile(params).then((res) => {
+                if (res.code == "200") {
+                    this.voucherNumber = res.data.id
+                } else {
+                    this.$message.error(res.msg);
+                }
             });
-        } else {
-          this.$message.error(res.msg);
-        }
-      });
-    },
+        },
+        settlement() {
+            this.$api.sys
+                .sysChannelCostSettle({
+                    voucherNumber: this.voucherNumber,
+                    ids: this.selectionList.map((val) => val.id),
+                })
+                .then((res) => {
+                    if (res.code == 200) {
+                        this.$message({
+                            message: res.msg || "保存成功",
+                            type: "success",
+                        });
+                        this.getList();
+                        this.dialogVisibleradio = false
+                        this.selectionList = [];
+                    } else {
+                        this.$message.error(res.msg);
+                    }
+                });
+        },
         jqCostsProportionFun(val) {
             this.formData.jqJtPremium = (Number(val) * Number(this.formData.jqPremium)).toFixed(2)
         },
@@ -481,8 +498,10 @@ export default {
                     }
                 });
         },
-        batch(){
-
+        batch() {
+            this.dialogVisibleradio = true
+            this.imageUrl = '';
+            this.voucherNumber=''
         },
         // 查询
         handleSearchList(data) {
@@ -568,4 +587,14 @@ export default {
     }
 };
 </script>
-<style lang="scss" scoped></style>
+<style scoped>
+.upload-demo {
+    display: inline-block;
+    margin-left: 5px;
+}
+
+.avatar {
+    width: 100%;
+    height: 100%;
+}
+</style>