费用账单打印

operationSupport/src/router/dynamicMuen.js

@@ -61,6 +61,12 @@ const staticMuen = [
         meta: { title: '编辑工作台' },
         name: 'editWorkbench'
     },
+    {
+        path: '/receipt',
+        component: () => import(/* webpackChunkName: "404" */ '@views/receipt/index.vue'),
+        meta: { title: '测试打印' },
+        name: 'receipt'
+    },
     {
         path: '*',
         redirect: '/404'

operationSupport/src/utils/LodopFuncs.js

@@ -0,0 +1,70 @@
+
+//用双端口加载主JS文件Lodop.js(或CLodopfuncs.js兼容老版本)以防其中某端口被占:
+var MainJS = "CLodopfuncs.js",
+  URL_WS1 = "ws://localhost:8000/" + MainJS,                //ws用8000/18000
+  URL_WS2 = "ws://localhost:18000/" + MainJS,
+  URL_HTTP1 = "http://localhost:8000/" + MainJS,              //http用8000/18000
+  URL_HTTP2 = "http://localhost:18000/" + MainJS,
+  URL_HTTP3 = "https://localhost.lodop.net:8443/" + MainJS;   //https用8000/8443
+
+//==检查加载成功与否，如没成功则用http(s)再试==
+//==低版本CLODOP6.561/Lodop7.043及前)用本方法==
+function checkOrTryHttp() {
+  if (window.getCLodop) return true;
+  var head = document.head || document.getElementsByTagName("head")[0] || document.documentElement;
+  var JS1 = document.createElement("script")
+    , JS2 = document.createElement("script")
+    , JS3 = document.createElement("script");
+  JS1.src = URL_HTTP1;
+  JS2.src = URL_HTTP2;
+  JS3.src = URL_HTTP3;
+  JS1.onerror = function (e) {
+    if (window.location.protocol !== 'https:')
+      head.insertBefore(JS2, head.firstChild); else
+      head.insertBefore(JS3, head.firstChild);
+  }
+  JS2.onerror = JS3.onerror = function () {
+    var JSelf = document.createElement("script");
+    JSelf.src = "/" + MainJS; //JSelf让其它电脑通过本机打印（仅适用CLodop自带例子）
+    document.head.insertBefore(JSelf, document.head.firstChild);
+  }
+  head.insertBefore(JS1, head.firstChild);
+}
+
+//==加载Lodop对象的主过程:==
+(function loadCLodop() {
+  if (!window.WebSocket && window.MozWebSocket) window.WebSocket = window.MozWebSocket;
+  //ws方式速度快(小于200ms)且可避免CORS错误,但要求Lodop版本足够新:
+  try {
+    var WSK1 = new WebSocket(URL_WS1);
+    WSK1.onopen = function (e) { setTimeout(checkOrTryHttp(), 200); }
+    WSK1.onmessage = function (e) { if (!window.getCLodop) eval(e.data); }
+    WSK1.onerror = function (e) {
+      var WSK2 = new WebSocket(URL_WS2);
+      WSK2.onopen = function (e) { setTimeout(checkOrTryHttp(), 200); }
+      WSK2.onmessage = function (e) { if (!window.getCLodop) eval(e.data); }
+      WSK2.onerror = function (e) { checkOrTryHttp(); }
+    }
+  } catch (e) {
+    checkOrTryHttp();
+  }
+})();
+
+//==获取LODOP对象的主过程:==
+function getLodop(oOBJECT, oEMBED) {
+  var LODOP;
+  try {
+    LODOP = window.getCLodop();
+    if (!LODOP && document.readyState !== "complete") {
+      alert("C-Lodop没准备好，请稍后再试！");
+      return;
+    }
+    //清理原例子内的object或embed元素，避免乱提示：
+    if (oEMBED && oEMBED.parentNode) oEMBED.parentNode.removeChild(oEMBED);
+    if (oOBJECT && oOBJECT.parentNode) oOBJECT.parentNode.removeChild(oOBJECT);
+    return LODOP;
+  } catch (err) {
+    alert("getLodop出错:" + err);
+  }
+}
+export { getLodop }

operationSupport/src/views/payService/call/index.vue

@@ -9,6 +9,9 @@
                 <el-input placeholder="欠费天数（大于）" class="search-input" clearable v-model="mixins_query.arrearageDays"></el-input>
                 <el-button type="primary" class="search-btn" @click="mixins_search" icon="el-icon-search">查询 </el-button>
                 <div class="search-icon">
+                    <el-tooltip effect="light" placement="bottom" content="打印催缴通知单">
+                        <i class="zoniot_font zoniot-icon-cuijiaoshezhi" @click="print"></i>
+                    </el-tooltip>
                     <el-tooltip effect="light" placement="bottom" content="催缴设置">
                         <i class="zoniot_font zoniot-icon-cuijiaoshezhi" @click="toPageSet"></i>
                     </el-tooltip>
@@ -47,7 +50,7 @@ import callRecord from './callRecord.vue';
 import callSet from './callSet.vue';
 export default {
     mixins: [list],
-    name:"call",
+    name: 'call',
     components: { callRecord, callSet },
     data() {
         return {
@@ -122,6 +125,31 @@ export default {
     },
     mounted() {},
     methods: {
+        print() {
+            if (!this.selectRow.length) {
+                this.$message.error('您尚未选择要操作项，请选择后再操作');
+                return;
+            }
+            let ids = [];
+            this.selectRow.forEach((v) => {
+                ids.push(v.id);
+            });
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/payService/call/printFuntion.vue',
+                    width: '400px',
+                    height: '150px',
+                    props: {
+                        ids,
+                        callback: resolve
+                    },
+                    hideStar: true,
+                    title: '请选择打印方式'
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
+        },
         getorgTree() {
             this.$http
                 .get('/sc-community/assets/community/list')

operationSupport/src/views/payService/call/printFuntion.vue

@@ -0,0 +1,49 @@
+<template>
+    <el-form>
+        <el-form-item label="分页方式">
+            <el-radio-group v-model="formData.types">
+                <el-radio :label="1">按业主</el-radio>
+                <el-radio :label="0">按业主+房间</el-radio>
+            </el-radio-group>
+        </el-form-item>
+        <el-form-item label="是否合并">
+            <el-radio-group v-model="formData.typelist">
+                <el-radio :label="1">是</el-radio>
+                <el-radio :label="0">否</el-radio>
+            </el-radio-group>
+        </el-form-item>
+    </el-form>
+</template>
+<script>
+export default {
+    data() {
+        return {
+            formData: {
+                types: 1,
+                typelist: 1
+            }
+        };
+    },
+    methods: {
+        submit() {
+            var loading = this.$loading();
+            alert('接口');
+            this.$http
+                .post(url, formData)
+                .then(({ status, msg }) => {
+                    if (status == 0) {
+                        this.$message.success(msg);
+                        this.params.callback();
+                        // this.$emit('close');
+                    } else {
+                        this.$message.error(msg);
+                    }
+                    loading.close();
+                })
+                .catch(() => {
+                    loading.close();
+                });
+        }
+    }
+};
+</script>

operationSupport/src/views/payService/propertyFee/actualReceipts.vue

@@ -0,0 +1,214 @@
+<template>
+    <div class="content main">
+        <zz-table
+            :settings="{ stripe: true }"
+            :cols="cols"
+            :data="mixins_list"
+            :pageset="mixins_pageset"
+            @page-change="pageChange"
+            @selection-change="selectionChange"
+        >
+            <template slot-scope="scope" slot="payBeginTime">
+                {{ typeTimeTransition(scope.row.payBeginTime, scope.row.payEndTime) }}
+            </template>
+
+            <template slot-scope="scope" slot="opt">
+                <div class="opt">
+                    <el-tooltip class="item" effect="light" placement="bottom" content="详情">
+                        <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetails(scope.row)"></i>
+                    </el-tooltip>
+                    <el-tooltip class="item" effect="light" placement="bottom" content="打印收据">
+                        <i class="zoniot_font zoniot-icon-xiangqing" @click="palys(scope.row.id)"></i>
+                    </el-tooltip>
+                    <el-tooltip v-if="scope.row.printStatus !== 0" class="item" effect="light" placement="bottom" content="收据作废">
+                        <i class="zoniot_font zoniot-icon-shanchu redText" @click="deluserbyidFn(scope.row.id)"></i>
+                    </el-tooltip>
+                </div>
+            </template>
+        </zz-table>
+    </div>
+</template>
+
+<script>
+import list from '@/utils/list.js';
+import { getLodop } from '@utils/LodopFuncs.js';
+export default {
+    mixins: [list],
+    data() {
+        return {
+            mixins_querys: {
+                chargeType: ''
+            },
+            cols: [
+                {
+                    label: '收据号',
+                    prop: 'receiptNumber'
+                },
+                {
+                    label: '地址',
+                    prop: 'assets'
+                },
+                {
+                    label: '业主',
+                    prop: 'clientName',
+                    width: '100'
+                },
+                {
+                    label: '费用名称',
+                    prop: 'chargeName',
+                    width: '200'
+                },
+                {
+                    label: '计费时间',
+                    prop: 'paymentDays'
+                },
+
+                {
+                    label: '应收金额(元)',
+                    prop: 'receivableAmount'
+                },
+                {
+                    label: '实收金额(元)',
+                    prop: 'receivedAmount'
+                },
+                {
+                    label: '付款方式',
+                    prop: 'payTypeDict'
+                },
+                {
+                    label: '缴费时间',
+                    prop: 'chargeDate'
+                },
+                {
+                    label: '打印状态',
+                    prop: 'printStatus',
+                    format(val) {
+                        if (val == 0) {
+                            return '<span class="redText">未打印</span>';
+                        } else if (val == 1) {
+                            return '<span class="greenText">已打印</span>';
+                        }
+                    }
+                },
+                {
+                    label: '备注',
+                    prop: 'remark'
+                },
+                {
+                    label: '操作',
+                    prop: 'id',
+                    slot: 'opt'
+                }
+            ],
+            mixins_post: 'get'
+        };
+    },
+    methods: {
+        editAmount(row) {
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/payService/propertyFee/stepPage/editAmount.vue',
+                    width: '550px',
+                    height: '180px',
+                    props: {
+                        data: row,
+                        callback: resolve
+                    },
+                    title: '修改应收金额'
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
+        },
+        effectiveDateToggle(va) {
+            let arr = va;
+            if (!arr) {
+                arr = ['', ''];
+            }
+            this.mixins_query.startTime = arr[0];
+            this.mixins_query.endTime = arr[1];
+        },
+        lookDetails(row) {
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/payService/propertyFee/stepPage/details.vue',
+                    width: '615px',
+                    height: '581px',
+                    props: {
+                        id: row.id,
+                        callback: resolve
+                    },
+                    showConfirmButton: true,
+                    showCancelButton: true,
+                    hideStar: true,
+                    title: '账单详情'
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
+        },
+        selectionChange(val) {
+            this.selectRow = val;
+        },
+        currentOrganId(data) {
+            this.currentId = data || '';
+        },
+
+        typeTimeTransition(start, end) {
+            let text = '';
+            if (!!end) {
+                let f = new Date(start).getMonth(),
+                    l = new Date(end).getMonth();
+                if (f == l) {
+                    text = `${this.$moment(new Date(start)).format('YYYY年M月')}`;
+                } else {
+                    text = `${this.$moment(new Date(start)).format('YYYY年M月')}-${this.$moment(new Date(end)).format('YYYY年M月')}`;
+                }
+            }
+
+            return text;
+        },
+        getListData() {
+            this.mixins_query.communityId = this.$parent.mixins_query.communityId;
+            this.mixins_query.buildingId = this.$parent.mixins_query.buildingId;
+            this.mixins_query.houseId = this.$parent.mixins_query.houseId;
+            this.mixins_query.unitName = this.$parent.mixins_query.unitName;
+
+            this.mixins_search();
+        },
+        palys(id) {
+            this.$http.post('/sc-charge/charge/receipt/print?id=' + id).then(({ data, msg, status }) => {
+                if (status == 0) {
+                    var LODOP; //声明为全局变量
+                    LODOP = getLodop();
+                    LODOP.PRINT_INIT('凤凰天誉专用收据');
+                    LODOP.ADD_PRINT_TABLE(30, 40, '90%', 200, data);
+                    //LODOP.SET_PRINT_STYLEA(0,"Top2Offset",-40); //这句可让次页起点向上移
+                    LODOP.SET_PRINT_PAGESIZE(1, 2410, 100, '');
+
+                    //LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
+                    LODOP.PREVIEW();
+                } else {
+                    this.$message.error(msg);
+                }
+            });
+        }
+    },
+    created() {
+        this.mixins_dataUrl = '/sc-charge/charge/receipt/page'; // 分页查询接口
+        this.mixins_query = {};
+        this.mixins_search();
+    }
+};
+</script>
+<style lang='scss' scoped >
+@import '@assets/css/public-style.scss';
+.search {
+    .zz-tab-button {
+        margin-right: 20px;
+    }
+    .width120 {
+        width: rem(120);
+    }
+}
+</style>

operationSupport/src/views/payService/propertyFee/index.vue

@@ -1,591 +1,516 @@
 <template>
-  <div class="content main">
-    <organ-tree @organId="currentOrganId"></organ-tree>
-    <div class="content-right">
-      <div class="search">
-        <el-radio-group
-          v-model="chargeStatus"
-          @change="changeRadio"
-          class="zz-tab-button"
-        >
-          <el-radio-button label="1">未交账单</el-radio-button>
-          <el-radio-button label="2">已交账单</el-radio-button>
-        </el-radio-group>
-        <el-input
-          clearable
-          placeholder="输入订单号/业主/房间号"
-          class="search-input"
-          v-trim
-          v-model.trim="mixins_query.name"
-        ></el-input>
-        <el-select
-          v-model="mixins_querys.chargeType"
-          placeholder="费用类型"
-          clearable
-          class="width120"
-        >
-          <template v-for="(item, index) in $publicArray.chargeType()">
-            <el-option
-              :label="item.label"
-              :value="item.value"
-              v-if="index < $publicArray.chargeType().length - 1"
-              :key="index"
-            ></el-option>
-          </template>
-        </el-select>
-        <!-- 已交 -->
-        <template v-if="chargeStatus == 2">
-          <el-select
-            v-model="mixins_query.payType"
-            class="width120"
-            placeholder="缴费方式"
-            clearable
-          >
-            <el-option
-              :label="item.label"
-              :value="item.value"
-              v-for="(item, index) in $publicArray.paymentType()"
-              :key="index"
-            ></el-option>
-          </el-select>
-          <el-date-picker
-            v-model="times"
-            value-format="yyyy-MM-dd"
-            type="daterange"
-            range-separator="至"
-            start-placeholder="选择开始日期"
-            end-placeholder="选择结束日期"
-            @change="effectiveDateToggle"
-          ></el-date-picker>
-        </template>
+    <div class="content main">
+        <organ-tree @organId="currentOrganId"></organ-tree>
+        <div class="content-right">
+            <div class="search">
+                <el-radio-group v-model="chargeStatus" @change="changeRadio" class="zz-tab-button">
+                    <el-radio-button :label="1">未交账单</el-radio-button>
+                    <el-radio-button :label="2">已交账单</el-radio-button>
+                    <el-radio-button :label="3">实收管理</el-radio-button>
+                </el-radio-group>
+                <template v-if="chargeStatus !== 3">
+                    <el-input
+                        clearable
+                        placeholder="输入订单号/业主/房间号"
+                        class="search-input"
+                        v-trim
+                        v-model.trim="mixins_query.name"
+                    ></el-input>
+                    <el-select v-model="mixins_querys.chargeType" placeholder="费用类型" clearable class="width120">
+                        <template v-for="(item, index) in $publicArray.chargeType()">
+                            <el-option
+                                :label="item.label"
+                                :value="item.value"
+                                v-if="index < $publicArray.chargeType().length - 1"
+                                :key="index"
+                            ></el-option>
+                        </template>
+                    </el-select>
+                    <!-- 已交 -->
+                    <template v-if="chargeStatus == 2">
+                        <el-select v-model="mixins_query.payType" class="width120" placeholder="缴费方式" clearable>
+                            <el-option
+                                :label="item.label"
+                                :value="item.value"
+                                v-for="(item, index) in $publicArray.paymentType()"
+                                :key="index"
+                            ></el-option>
+                        </el-select>
+                        <el-date-picker
+                            v-model="times"
+                            value-format="yyyy-MM-dd"
+                            type="daterange"
+                            range-separator="至"
+                            start-placeholder="选择开始日期"
+                            end-placeholder="选择结束日期"
+                            @change="effectiveDateToggle"
+                        ></el-date-picker>
+                    </template>
 
-        <el-date-picker
-          v-else
-          v-model="times"
-          value-format="yyyy-MM"
-          type="monthrange"
-          range-separator="至"
-          start-placeholder="选择开始月"
-          end-placeholder="选择结束月"
-          @change="effectiveDateToggle"
-        ></el-date-picker>
+                    <el-date-picker
+                        v-else
+                        v-model="times"
+                        value-format="yyyy-MM"
+                        type="monthrange"
+                        range-separator="至"
+                        start-placeholder="选择开始月"
+                        end-placeholder="选择结束月"
+                        @change="effectiveDateToggle"
+                    ></el-date-picker>
 
-        <el-button
-          class="search-btn"
-          type="primary"
-          @click="mixins_search()"
-          icon="el-icon-search"
-        >搜索</el-button>
-        <div class="search-icon">
-          <el-tooltip
-            v-show="chargeStatus == 1 && chiData.type === 'room'"
-            class="item"
-            effect="light"
-            placement="bottom"
-            content="临时收款"
-          >
-            <i
-              class="zoniot_font zoniot-icon-linshishoukuan"
-              @click="collections('temporary')"
-            ></i>
-          </el-tooltip>
-          <el-dropdown
-            type="primary"
-            @command="addCommand"
-          >
-            <span class="zoniot_font zoniot-icon-tianjia2"></span>
-            <el-dropdown-menu
-              slot="dropdown"
-              hide-on-click="false"
-              class="device-search-dropdown"
-            >
-              <el-dropdown-item command="batchAdd">
-                <div class="upload_div">
-                  <xk-upload
-                    class="upload_class"
-                    @callback="mixins_search"
-                    :params="{ importType: 'BILL' }"
-                  >
-                    <span slot="content">批量导入</span>
-                  </xk-upload>
-                </div>
-              </el-dropdown-item>
-              <el-dropdown-item command="template">下载模板</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
-          <el-tooltip
-            v-show="chargeStatus == 1"
-            class="item"
-            effect="light"
-            placement="bottom"
-            content="批量收款"
-          >
-            <i
-              class="zoniot_font zoniot-icon-piliangshoukuan"
-              @click="collections('bulk')"
-            ></i>
-          </el-tooltip>
-          <el-tooltip
-            class="item"
-            effect="light"
-            placement="bottom"
-            content="导出"
-          >
-            <i
-              class="zoniot_font zoniot-icon-daochu2"
-              @click="exportExcel"
-            ></i>
-          </el-tooltip>
-        </div>
-      </div>
-      <zz-table
-        v-if="statusTable"
-        :settings="{ showCheckbox: chargeStatus == 1, showIndex: chargeStatus == 2, stripe: true }"
-        :cols="chargeStatus == 1 ? cols : statusCols"
-        :data="mixins_list"
-        :pageset="mixins_pageset"
-        @page-change="pageChange"
-        :selectable="selectable"
-        @selection-change="selectionChange"
-      >
-        <template
-          slot-scope="scope"
-          slot="payBeginTime"
-        >
-          {{ typeTimeTransition(scope.row.payBeginTime, scope.row.payEndTime) }}
-        </template>
+                    <el-button class="search-btn" type="primary" @click="mixins_search()" icon="el-icon-search">搜索</el-button>
+                    <div class="search-icon">
+                        <el-tooltip
+                            v-show="chargeStatus == 1 && chiData.type === 'room'"
+                            class="item"
+                            effect="light"
+                            placement="bottom"
+                            content="临时收款"
+                        >
+                            <i class="zoniot_font zoniot-icon-linshishoukuan" @click="collections('temporary')"></i>
+                        </el-tooltip>
+                        <el-dropdown type="primary" @command="addCommand">
+                            <span class="zoniot_font zoniot-icon-tianjia2"></span>
+                            <el-dropdown-menu slot="dropdown" hide-on-click="false" class="device-search-dropdown">
+                                <el-dropdown-item command="batchAdd">
+                                    <div class="upload_div">
+                                        <xk-upload class="upload_class" @callback="mixins_search" :params="{ importType: 'BILL' }">
+                                            <span slot="content">批量导入</span>
+                                        </xk-upload>
+                                    </div>
+                                </el-dropdown-item>
+                                <el-dropdown-item command="template">下载模板</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </el-dropdown>
+                        <el-tooltip v-show="chargeStatus == 1" class="item" effect="light" placement="bottom" content="批量收款">
+                            <i class="zoniot_font zoniot-icon-piliangshoukuan" @click="collections('bulk')"></i>
+                        </el-tooltip>
+                        <el-tooltip class="item" effect="light" placement="bottom" content="导出">
+                            <i class="zoniot_font zoniot-icon-daochu2" @click="exportExcel"></i>
+                        </el-tooltip>
+                    </div>
+                </template>
+                <template v-else> 41515151 </template>
+            </div>
+            <template v-if="chargeStatus !== 3">
+                <zz-table
+                    v-if="statusTable"
+                    :settings="{ showCheckbox: chargeStatus == 1, showIndex: chargeStatus == 2, stripe: true }"
+                    :cols="chargeStatus == 1 ? cols : statusCols"
+                    :data="mixins_list"
+                    :pageset="mixins_pageset"
+                    @page-change="pageChange"
+                    :selectable="selectable"
+                    @selection-change="selectionChange"
+                >
+                    <template slot-scope="scope" slot="payBeginTime">
+                        {{ typeTimeTransition(scope.row.payBeginTime, scope.row.payEndTime) }}
+                    </template>
 
-        <template
-          slot-scope="scope"
-          slot="opt"
-        >
-          <div class="opt">
-            <el-tooltip
-              v-show="chargeStatus == 1"
-              class="item"
-              effect="light"
-              placement="bottom"
-              content="收款"
-            >
-              <i
-                class="zoniot_font zoniot-icon-shoukuan"
-                @click="collections('single', scope.row)"
-              ></i>
-            </el-tooltip>
-            <el-tooltip
-              v-show="chargeStatus == 1"
-              class="item"
-              effect="light"
-              placement="bottom"
-              content="修改金额"
-            >
-              <i
-                class="zoniot_font zoniot-icon-koufeijilu"
-                @click="editAmount(scope.row)"
-              ></i>
-            </el-tooltip>
-            <el-tooltip
-              v-show="chargeStatus == 1"
-              class="item"
-              effect="light"
-              placement="bottom"
-              content="删除"
-            >
-              <i
-                class="zoniot_font zoniot-icon-shanchu redText"
-                @click="deluserbyidFn(scope.row.id)"
-              ></i>
-            </el-tooltip>
-            <el-tooltip
-              v-show="chargeStatus == 2"
-              class="item"
-              effect="light"
-              placement="bottom"
-              content="详情"
-            >
-              <i
-                class="zoniot_font zoniot-icon-xiangqing"
-                @click="lookDetails(scope.row)"
-              ></i>
-            </el-tooltip>
-          </div>
-        </template>
-      </zz-table>
+                    <template slot-scope="scope" slot="opt">
+                        <div class="opt">
+                            <el-tooltip v-show="chargeStatus == 1" class="item" effect="light" placement="bottom" content="收款">
+                                <i class="zoniot_font zoniot-icon-shoukuan" @click="collections('single', scope.row)"></i>
+                            </el-tooltip>
+                            <el-tooltip v-show="chargeStatus == 1" class="item" effect="light" placement="bottom" content="修改金额">
+                                <i class="zoniot_font zoniot-icon-koufeijilu" @click="editAmount(scope.row)"></i>
+                            </el-tooltip>
+                            <el-tooltip v-show="chargeStatus == 1" class="item" effect="light" placement="bottom" content="删除">
+                                <i class="zoniot_font zoniot-icon-shanchu redText" @click="deluserbyidFn(scope.row.id)"></i>
+                            </el-tooltip>
+                            <el-tooltip v-show="chargeStatus == 2" class="item" effect="light" placement="bottom" content="详情">
+                                <i class="zoniot_font zoniot-icon-xiangqing" @click="lookDetails(scope.row)"></i>
+                            </el-tooltip>
+                        </div>
+                    </template>
+                </zz-table>
+            </template>
+            <actualReceipts ref="actual" v-if="chargeStatus == 3" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script>
 import list from '@/utils/list.js';
+import actualReceipts from './actualReceipts.vue';
 
 export default {
-  mixins: [list],
-  name: 'propertyFee',
-  data () {
-    return {
-      mixins_querys: {
-        chargeType: ''
-      },
-      currentId: '',
-      cols: [
-        {
-          label: '订单号',
-          prop: 'billNumber'
-        },
-        {
-          label: '地址',
-          prop: 'assets'
-        },
-        {
-          label: '业主',
-          prop: 'residentName',
-          width: '100'
-        },
-        {
-          label: '费用名称',
-          prop: 'chargeName',
-          width: '200'
-        },
-        {
-          label: '计费日期',
-          prop: 'payBeginTime',
-          slot: 'payBeginTime',
-          width: '150'
-        },
-        {
-          label: '费用金额(元)',
-          prop: 'amount'
+    mixins: [list],
+    name: 'propertyFee',
+    components: {
+        actualReceipts
+    },
+    data() {
+        return {
+            mixins_querys: {
+                chargeType: ''
+            },
+            currentId: '',
+            cols: [
+                {
+                    label: '订单号',
+                    prop: 'billNumber'
+                },
+                {
+                    label: '地址',
+                    prop: 'assets'
+                },
+                {
+                    label: '业主',
+                    prop: 'residentName',
+                    width: '100'
+                },
+                {
+                    label: '费用名称',
+                    prop: 'chargeName',
+                    width: '200'
+                },
+                {
+                    label: '计费日期',
+                    prop: 'payBeginTime',
+                    slot: 'payBeginTime',
+                    width: '150'
+                },
+                {
+                    label: '费用金额(元)',
+                    prop: 'amount'
+                },
+                {
+                    label: '滞纳金(元)',
+                    prop: 'lateFee'
+                },
+
+                {
+                    label: '应收金额(元)',
+                    prop: 'receivableAmount'
+                },
+                {
+                    label: '缴费状态',
+                    prop: 'chargeStatusDict'
+                },
+                {
+                    label: '操作',
+                    prop: 'id',
+                    slot: 'opt'
+                }
+            ],
+            statusCols: [
+                {
+                    label: '订单号',
+                    prop: 'billNumber'
+                },
+                {
+                    label: '地址',
+                    prop: 'assets'
+                },
+                {
+                    label: '住户',
+                    prop: 'residentName'
+                },
+                {
+                    label: '费用名称',
+                    prop: 'chargeName'
+                },
+                {
+                    label: '计费日期',
+                    prop: 'payBeginTime',
+                    slot: 'payBeginTime',
+                    width: '150'
+                },
+                {
+                    label: '应收金额(元)',
+                    prop: 'receivableAmount'
+                },
+                {
+                    label: '实收金额(元)',
+                    prop: 'receivedAmount'
+                },
+                {
+                    label: '付款方式',
+                    prop: 'payTypeDict'
+                },
+                {
+                    label: '缴费状态',
+                    prop: 'chargeStatusDict'
+                },
+                {
+                    label: '缴费时间',
+                    prop: 'chargeDate',
+                    width: '150'
+                },
+                {
+                    label: '操作',
+                    prop: 'id',
+                    slot: 'opt'
+                }
+            ],
+            chargeStatus: 1,
+            chiData: {
+                type: '',
+                value: '',
+                address: ''
+            },
+            mixins_post: 'post',
+            selectRow: [],
+            statusTable: true,
+            times: []
+        };
+    },
+    methods: {
+        mixins_search() {
+            this.mixins_pageset.pageNum = 1;
+            if (!!this.mixins_querys.chargeType) {
+                this.mixins_query.chargeType = this.mixins_querys.chargeType;
+            } else {
+                this.mixins_query.chargeType = '1,2,3,4,5,6,7';
+            }
+            if (this.chargeStatus == 1) {
+                this.mixins_query.payType = '';
+            }
+
+            this.getList();
         },
-        {
-          label: '滞纳金(元)',
-          prop: 'lateFee'
+        editAmount(row) {
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/payService/propertyFee/stepPage/editAmount.vue',
+                    width: '550px',
+                    height: '180px',
+                    props: {
+                        data: row,
+                        callback: resolve
+                    },
+                    title: '修改应收金额'
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
         },
+        collections(todo, row) {
+            new Promise((resolve) => {
+                let title = '',
+                    hideStar,
+                    height = '230px',
+                    width = '900px';
+                if (todo == 'temporary') {
+                    title = '设置收费项目';
+                    hideStar = false;
+                    height = '270px';
+                    width = '550px';
+                } else if (todo == 'bulk') {
+                    if (!this.selectRow.length) {
+                        this.$message.error('您尚未选择要收款项，请选择后再操作批量');
+                        return;
+                    }
+                    let tag = false;
+                    this.selectRow.map((item) => {
+                        if (this.selectRow[0].houseId == item.houseId) {
+                            tag = true;
+                        } else {
+                            tag = false;
+                        }
+                    });
+                    if (!tag) {
+                        this.$message.error('选择同一房间后再操作批量');
+                        return;
+                    }
 
-        {
-          label: '应收金额(元)',
-          prop: 'receivableAmount'
-        },
-        {
-          label: '缴费状态',
-          prop: 'chargeStatusDict'
+                    title = '批量收款';
+                    hideStar = true;
+                    height = '528px';
+                    width = '900px';
+                } else if (todo == 'single') {
+                    title = '收款';
+                    hideStar = true;
+                    height = '614px';
+                    width = '614px';
+                }
+                this.$store.dispatch('addPopup', {
+                    url: '/payService/propertyFee/stepPage/' + todo + '.vue',
+                    // url: '/payService/propertyFee/stepPage/single.vue',
+                    width: width,
+                    height: height,
+                    props: {
+                        data: row,
+                        selectRow: this.selectRow,
+                        chiData: this.chiData,
+                        tabList: todo,
+                        communityId: this.mixins_query.communityId,
+                        callback: resolve
+                    },
+                    hideStar: hideStar,
+                    title: title
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
         },
-        {
-          label: '操作',
-          prop: 'id',
-          slot: 'opt'
-        }
-      ],
-      statusCols: [
-        {
-          label: '订单号',
-          prop: 'billNumber'
+        effectiveDateToggle(va) {
+            let arr = va;
+            if (!arr) {
+                arr = ['', ''];
+            }
+            this.mixins_query.startTime = arr[0];
+            this.mixins_query.endTime = arr[1];
         },
-        {
-          label: '地址',
-          prop: 'assets'
+        lookDetails(row) {
+            new Promise((resolve) => {
+                this.$store.dispatch('addPopup', {
+                    url: '/payService/propertyFee/stepPage/details.vue',
+                    width: '615px',
+                    height: '581px',
+                    props: {
+                        id: row.id,
+                        callback: resolve
+                    },
+                    showConfirmButton: true,
+                    showCancelButton: true,
+                    hideStar: true,
+                    title: '账单详情'
+                });
+            }).then(() => {
+                this.mixins_search();
+            });
         },
-        {
-          label: '住户',
-          prop: 'residentName'
+        deluserbyidFn(id) {
+            const h = this.$createElement;
+            this.$msgBox(`删除账单`, '删除后将无法恢复，请问是否继续?')
+                .then(() => {
+                    this.$http.get('/sc-charge/charge/bill/delete', { billId: id }).then(({ status, data, msg }) => {
+                        if (0 === status) {
+                            this.$message({
+                                type: 'success',
+                                message: '删除成功!'
+                            });
+                            this.mixins_search();
+                        } else {
+                            this.$message.error(msg);
+                        }
+                    });
+                })
+                .catch(() => {});
         },
-        {
-          label: '费用名称',
-          prop: 'chargeName'
+        selectionChange(val) {
+            this.selectRow = val;
         },
-        {
-          label: '计费日期',
-          prop: 'payBeginTime',
-          slot: 'payBeginTime',
-          width: '150'
+        currentOrganId(data) {
+            this.currentId = data || '';
         },
-        {
-          label: '应收金额(元)',
-          prop: 'receivableAmount'
+        changeRadio() {
+            if (this.chargeStatus !== 3) {
+                this.statusTable = false;
+                this.$nextTick(() => {
+                    this.statusTable = true;
+                });
+                this.times = [];
+                this.Object_Set(['startTime', 'endTime', 'chargeStatus'], ['', '', this.chargeStatus]);
+                this.mixins_search();
+            }
         },
-        {
-          label: '实收金额(元)',
-          prop: 'receivedAmount'
+        addCommand(command) {
+            if (command === 'template') {
+                this.__exportExcel('/sc-community/excel/download/template', { importType: 'BILL' });
+                return;
+            }
         },
-        {
-          label: '付款方式',
-          prop: 'payTypeDict'
+        exportExcel() {
+            this.__exportExcel('/sc-charge/charge/bill/export/excel', this.mixins_query);
         },
-        {
-          label: '缴费状态',
-          prop: 'chargeStatusDict'
+        typeTimeTransition(start, end) {
+            let text = '';
+            if (!!end) {
+                let f = new Date(start).getMonth(),
+                    l = new Date(end).getMonth();
+                if (f == l) {
+                    text = `${this.$moment(new Date(start)).format('YYYY年M月')}`;
+                } else {
+                    text = `${this.$moment(new Date(start)).format('YYYY年M月')}-${this.$moment(new Date(end)).format('YYYY年M月')}`;
+                }
+            }
+
+            return text;
         },
-        {
-          label: '缴费时间',
-          prop: 'chargeDate',
-          width: '150'
+        selectable(row, index) {
+            return true;
         },
-        {
-          label: '操作',
-          prop: 'id',
-          slot: 'opt'
-        }
-      ],
-      chargeStatus: 1,
-      chiData: {
-        type: '',
-        value: '',
-        address: ''
-      },
-      mixins_post: 'post',
-      selectRow: [],
-      statusTable: true,
-      times: []
-    };
-  },
-  methods: {
-    mixins_search () {
-      this.mixins_pageset.pageNum = 1;
-      if (!!this.mixins_querys.chargeType) {
-        this.mixins_query.chargeType = this.mixins_querys.chargeType;
-      } else {
-        this.mixins_query.chargeType = '1,2,3,4,5,6,7';
-      }
-      if (this.chargeStatus == 1) {
-        this.mixins_query.payType = '';
-      }
-
-      this.getList();
-    },
-    editAmount (row) {
-      new Promise((resolve) => {
-        this.$store.dispatch('addPopup', {
-          url: '/payService/propertyFee/stepPage/editAmount.vue',
-          width: '550px',
-          height: '180px',
-          props: {
-            data: row,
-            callback: resolve
-          },
-          title: '修改应收金额'
-        });
-      }).then(() => {
-        this.mixins_search();
-      });
-    },
-    collections (todo, row) {
-      new Promise((resolve) => {
-        let title = '',
-          hideStar,
-          height = '230px',
-          width = '900px';
-        if (todo == 'temporary') {
-          title = '设置收费项目';
-          hideStar = false;
-          height = '270px';
-          width = '550px';
-        } else if (todo == 'bulk') {
-          if (!this.selectRow.length) {
-            this.$message.error('您尚未选择要收款项，请选择后再操作批量');
-            return;
-          }
-          let tag = false;
-          this.selectRow.map((item) => {
-            if (this.selectRow[0].houseId == item.houseId) {
-              tag = true;
+        Object_Set(thisObj, val, editThisObj) {
+            if (thisObj instanceof Array && val instanceof Array) {
+                if (!!editThisObj) {
+                    thisObj.map((item, index) => {
+                        this[editThisObj][item] = val[index];
+                    });
+                } else {
+                    thisObj.map((item, index) => {
+                        this['mixins_query'][item] = val[index];
+                    });
+                }
             } else {
-              tag = false;
+                if (!!editThisObj) {
+                    this[editThisObj][thisObj] = val;
+                } else {
+                    this['mixins_query'][thisObj] = val;
+                }
             }
-          });
-          if (!tag) {
-            this.$message.error('选择同一房间后再操作批量');
-            return;
-          }
-
-          title = '批量收款';
-          hideStar = true;
-          height = '528px';
-          width = '900px';
-        } else if (todo == 'single') {
-          title = '收款';
-          hideStar = true;
-          height = '614px';
-          width = '614px';
         }
-        this.$store.dispatch('addPopup', {
-          url: '/payService/propertyFee/stepPage/' + todo + '.vue',
-          // url: '/payService/propertyFee/stepPage/single.vue',
-          width: width,
-          height: height,
-          props: {
-            data: row,
-            selectRow: this.selectRow,
-            chiData: this.chiData,
-            tabList: todo,
-            communityId: this.mixins_query.communityId,
-            callback: resolve
-          },
-          hideStar: hideStar,
-          title: title
-        });
-      }).then(() => {
-        this.mixins_search();
-      });
-    },
-    effectiveDateToggle (va) {
-      let arr = va;
-      if (!arr) {
-        arr = ['', ''];
-      }
-      this.mixins_query.startTime = arr[0];
-      this.mixins_query.endTime = arr[1];
     },
-    lookDetails (row) {
-      new Promise((resolve) => {
-        this.$store.dispatch('addPopup', {
-          url: '/payService/propertyFee/stepPage/details.vue',
-          width: '615px',
-          height: '581px',
-          props: {
-            id: row.id,
-            callback: resolve
-          },
-          showConfirmButton: true,
-          showCancelButton: true,
-          hideStar: true,
-          title: '账单详情'
-        });
-      }).then(() => {
-        this.mixins_search();
-      });
-    },
-    deluserbyidFn (id) {
-      const h = this.$createElement;
-      this.$msgBox(`删除账单`, '删除后将无法恢复，请问是否继续?')
-        .then(() => {
-          this.$http.get('/sc-charge/charge/bill/delete', { billId: id }).then(({ status, data, msg }) => {
-            if (0 === status) {
-              this.$message({
-                type: 'success',
-                message: '删除成功!'
-              });
-              this.mixins_search();
+    watch: {
+        currentId(newValue, oldValue) {
+            this.Object_Set(['communityId', 'buildingId', 'unitName', 'houseId'], ['', '', '', '']);
+            if (newValue.type) {
+                this.chiData.type = newValue.type;
+                if (newValue.type === 'community') {
+                    this.Object_Set(['communityId'], [newValue.communityId]);
+                    this.Object_Set(['value', 'address'], [newValue.communityId, newValue.communityName], 'chiData');
+                } else if (newValue.type === 'building') {
+                    this.Object_Set(['communityId', 'buildingId'], [newValue.communityId, newValue.buildingId]);
+                    this.Object_Set(
+                        ['value', 'address'],
+                        [newValue.buildingId, newValue.communityName + ' ' + newValue.buildingName],
+                        'chiData'
+                    );
+                } else if (newValue.type === 'unit') {
+                    this.Object_Set(
+                        ['communityId', 'buildingId', 'unitName'],
+                        [newValue.communityId, newValue.buildingId, newValue.unitId]
+                    );
+                    this.Object_Set(
+                        ['value', 'address'],
+                        [
+                            newValue.buildingId + ':' + newValue.unitId,
+                            newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName
+                        ],
+                        'chiData'
+                    );
+                } else if (newValue.type === 'room') {
+                    this.Object_Set(
+                        ['communityId', 'buildingId', 'unitName', 'houseId'],
+                        [newValue.communityId, newValue.buildingId, newValue.unitId, newValue.houseId]
+                    );
+                    this.Object_Set(
+                        ['value', 'address'],
+                        [
+                            newValue.houseId,
+                            newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName + ' ' + newValue.houseName
+                        ],
+                        'chiData'
+                    );
+                }
+            }
+            if (this.chargeStatus == 3) {
+                this.$refs.actual.getListData();
             } else {
-              this.$message.error(msg);
+                this.mixins_search();
             }
-          });
-        })
-        .catch(() => { });
-    },
-    selectionChange (val) {
-      this.selectRow = val;
-    },
-    currentOrganId (data) {
-      this.currentId = data || '';
-    },
-    changeRadio () {
-      this.statusTable = false;
-      this.$nextTick(() => {
-        this.statusTable = true;
-      });
-      this.times = [];
-      this.Object_Set(['startTime', 'endTime', 'chargeStatus'], ['', '', this.chargeStatus]);
-      this.mixins_search();
-    },
-    addCommand (command) {
-      if (command === 'template') {
-        this.__exportExcel('/sc-community/excel/download/template', { importType: 'BILL' });
-        return;
-      }
-    },
-    exportExcel () {
-      this.__exportExcel('/sc-charge/charge/bill/export/excel', this.mixins_query);
-    },
-    typeTimeTransition (start, end) {
-      let text = '';
-      if (!!end) {
-        let f = new Date(start).getMonth(),
-          l = new Date(end).getMonth();
-        if (f == l) {
-          text = `${this.$moment(new Date(start)).format('YYYY年M月')}`;
-        } else {
-          text = `${this.$moment(new Date(start)).format('YYYY年M月')}-${this.$moment(new Date(end)).format('YYYY年M月')}`;
         }
-      }
-
-      return text;
-    },
-    selectable (row, index) {
-      return true;
     },
-    Object_Set (thisObj, val, editThisObj) {
-      if (thisObj instanceof Array && val instanceof Array) {
-        if (!!editThisObj) {
-          thisObj.map((item, index) => {
-            this[editThisObj][item] = val[index];
-          });
-        } else {
-          thisObj.map((item, index) => {
-            this['mixins_query'][item] = val[index];
-          });
-        }
-      } else {
-        if (!!editThisObj) {
-          this[editThisObj][thisObj] = val;
-        } else {
-          this['mixins_query'][thisObj] = val;
-        }
-      }
-    }
-  },
-  watch: {
-    currentId (newValue, oldValue) {
-      this.Object_Set(['communityId', 'buildingId', 'unitName', 'houseId'], ['', '', '', '']);
-      if (newValue.type) {
-        this.chiData.type = newValue.type;
-        if (newValue.type === 'community') {
-          this.Object_Set(['communityId'], [newValue.communityId]);
-          this.Object_Set(['value', 'address'], [newValue.communityId, newValue.communityName], 'chiData');
-        } else if (newValue.type === 'building') {
-          this.Object_Set(['communityId', 'buildingId'], [newValue.communityId, newValue.buildingId]);
-          this.Object_Set(
-            ['value', 'address'],
-            [newValue.buildingId, newValue.communityName + ' ' + newValue.buildingName],
-            'chiData'
-          );
-        } else if (newValue.type === 'unit') {
-          this.Object_Set(
-            ['communityId', 'buildingId', 'unitName'],
-            [newValue.communityId, newValue.buildingId, newValue.unitId]
-          );
-          this.Object_Set(
-            ['value', 'address'],
-            [
-              newValue.buildingId + ':' + newValue.unitId,
-              newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName
-            ],
-            'chiData'
-          );
-        } else if (newValue.type === 'room') {
-          this.Object_Set(
-            ['communityId', 'buildingId', 'unitName', 'houseId'],
-            [newValue.communityId, newValue.buildingId, newValue.unitId, newValue.houseId]
-          );
-          this.Object_Set(
-            ['value', 'address'],
-            [
-              newValue.houseId,
-              newValue.communityName + ' ' + newValue.buildingName + ' ' + newValue.unitName + ' ' + newValue.houseName
-            ],
-            'chiData'
-          );
-        }
-      }
-      this.mixins_search();
+    created() {
+        this.mixins_dataUrl = '/sc-charge/charge/bill/page'; // 分页查询接口
+        this.mixins_query = {
+            chargeStatus: this.chargeStatus,
+            chargeType: '1,2,3,4,5,6,7',
+            payType: ''
+        };
     }
-  },
-  created () {
-    this.mixins_dataUrl = '/sc-charge/charge/bill/page'; // 分页查询接口
-    this.mixins_query = {
-      chargeStatus: this.chargeStatus,
-      chargeType: '1,2,3,4,5,6,7',
-      payType: ''
-    };
-  }
 };
 </script>
 <style lang='scss' scoped >

operationSupport/src/views/payService/systemSetup/index.vue

@@ -15,6 +15,8 @@
         <paymentSetup v-if="activeIndex == 1" />
         <valveSetup v-if="activeIndex == 2" />
         <gateSetup v-if="activeIndex == 3" />
+        <invoiceSetup v-if="activeIndex == 4" />
+        <reminderSetup v-if="activeIndex == 5" />
     </div>
 </template>
 
@@ -22,15 +24,18 @@
 import gateSetup from './stepPage/gateSetup.vue';
 import paymentSetup from './stepPage/paymentSetup.vue';
 import valveSetup from './stepPage/valveSetup.vue';
+import invoiceSetup from './stepPage/invoiceSetup.vue';
+import reminderSetup from './stepPage/reminderSetup.vue';
 
 export default {
-
     components: {
         gateSetup,
         paymentSetup,
-        valveSetup
+        valveSetup,
+        invoiceSetup,
+        reminderSetup
     },
-    name:"systemSetup",
+    name: 'systemSetup',
     data() {
         return {
             tabs: [
@@ -42,6 +47,12 @@ export default {
                 },
                 {
                     label: '闸控设置'
+                },
+                {
+                    label: '专用收据设置'
+                },
+                {
+                    label: '催缴通知单设置'
                 }
             ],
             activeIndex: 1

operationSupport/src/views/payService/systemSetup/stepPage/invoiceSetup.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <community-tree @organId="currentOrganId"></community-tree>
+        <div class="content-right">
+            <el-form ref="form" :model="formData">
+                <el-form-item>
+                    <div class="item-title">专用收据设置</div>
+                    <el-input type="textarea" :rows="20" v-model="formData.content"></el-input>
+                </el-form-item>
+
+                <el-form-item style="text-align: right">
+                    <el-button type="primary" @click="submit">保存</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+<script>
+import communityTree from './communityTree.vue';
+export default {
+    components: {
+        communityTree
+    },
+    data() {
+        return {
+            currentId: '',
+            formData: {
+                content: ''
+            }
+        };
+    },
+    methods: {
+        submit() {
+            let url = '/sc-charge/template/save';
+            let obj = {
+                communityId: this.currentId,
+                content: this.formData.content,
+                type: 1
+            };
+            if (!!this.formData.id) {
+                obj.id = this.formData.id;
+            }
+            this.$http
+                .post(url, obj)
+                .then(({ msg, status }) => {
+                    this.$message({
+                        type: status === 0 ? 'success' : 'error',
+                        message: msg
+                    });
+                })
+                .catch(() => {});
+        },
+
+        getData() {
+            let instaData = { communityId: this.currentId, type: 1 };
+            this.$http
+                .get('/sc-charge/template/findTemplate', instaData)
+                .then(({ data, msg, status }) => {
+                    if (!!data) {
+                        this.formData = data;
+                    } else {
+                        this.formData.content = '';
+                    }
+                })
+                .catch(() => {});
+        },
+        currentOrganId(data) {
+            this.currentId = data.id || '';
+            this.getData();
+        }
+    },
+
+    created() {}
+};
+</script>
+<style scoped lang='scss'>
+.content-right {
+    background: white;
+    font-size: 12px;
+    padding: 20px;
+    height: calc(100% - 100px);
+    .item-title {
+        /deep/ .el-input {
+            display: inline-block;
+            width: 120px;
+            margin: 0 10px;
+        }
+    }
+}
+</style>

operationSupport/src/views/payService/systemSetup/stepPage/reminderSetup.vue

@@ -0,0 +1,90 @@
+<template>
+    <div>
+        <community-tree @organId="currentOrganId"></community-tree>
+        <div class="content-right">
+            <el-form ref="form" :model="formData">
+                <el-form-item>
+                    <div class="item-title">催缴通知单设置</div>
+                    <el-input type="textarea" :rows="20" v-model="formData.content"></el-input>
+                </el-form-item>
+
+                <el-form-item style="text-align: right">
+                    <el-button type="primary" @click="submit">保存</el-button>
+                </el-form-item>
+            </el-form>
+        </div>
+    </div>
+</template>
+<script>
+import communityTree from './communityTree.vue';
+export default {
+    components: {
+        communityTree
+    },
+    data() {
+        return {
+            currentId: '',
+            formData: {
+                content: ''
+            }
+        };
+    },
+    methods: {
+        submit() {
+            let url = '/sc-charge/template/save';
+            let obj = {
+                communityId: this.currentId,
+                content: this.formData.content,
+                type: 2
+            };
+            if (!!this.formData.id) {
+                obj.id = this.formData.id;
+            }
+            this.$http
+                .post(url, obj)
+                .then(({ msg, status }) => {
+                    this.$message({
+                        type: status === 0 ? 'success' : 'error',
+                        message: msg
+                    });
+                })
+                .catch(() => {});
+        },
+
+        getData() {
+            let instaData = { communityId: this.currentId, type: 2 };
+            this.$http
+                .get('/sc-charge/template/findTemplate', instaData)
+                .then(({ data, msg, status }) => {
+                    if (!!data) {
+                        this.formData = data;
+                    } else {
+                        this.formData.content = '';
+                    }
+                })
+                .catch(() => {});
+        },
+        currentOrganId(data) {
+            this.currentId = data.id || '';
+            this.getData();
+        }
+    },
+
+    created() {}
+};
+</script>
+<style scoped lang='scss'>
+.content-right {
+    background: white;
+    font-size: 12px;
+    padding: 20px;
+    height: calc(100% - 100px);
+    .item-title {
+        /deep/ .el-input {
+            display: inline-block;
+            width: 120px;
+            margin: 0 10px;
+        }
+    }
+}
+</style>

operationSupport/src/views/receipt/index.vue

@@ -0,0 +1,34 @@
+<template>
+    <div>
+        <div v-html="htmls"></div>
+        <div @click="palys()">打印</div>
+    </div>
+</template>
+<script>
+import { getLodop } from '@utils/LodopFuncs.js';
+export default {
+    data() {
+        return {
+            htmls: ''
+        };
+    },
+    created() {
+        this.$http.post('/sc-charge/charge/receipt/html?id=8').then((res) => {
+            this.htmls = res.data;
+        });
+    },
+    methods: {
+        palys() {
+            var LODOP; //声明为全局变量
+            LODOP = getLodop();
+            LODOP.PRINT_INIT('凤凰天誉专用收据');
+            LODOP.ADD_PRINT_TABLE(30, 40, '90%', 200, this.htmls);
+            //LODOP.SET_PRINT_STYLEA(0,"Top2Offset",-40); //这句可让次页起点向上移
+            LODOP.SET_PRINT_PAGESIZE(1, 2410, 100, '');
+
+            //LODOP.SET_PRINT_STYLEA(0,"LinkedItem",-1);
+            LODOP.PREVIEW();
+        }
+    }
+};
+</script>