@nstc-business/tbm 0.0.1 → 1.0.1

package/package.json

@@ -1,8 +1,7 @@
 {
   "name": "@nstc-business/tbm",
-  "version": "0.0.1",
+  "version": "1.0.1",
   "private": false,
-  "main": "src/index.js",
   "scripts": {
     "serve": "vue-cli-service serve",
     "test": "vue-cli-service serve --test",
@@ -22,6 +21,7 @@
     "el-table-draggable": "^1.4.4",
     "element-ui": "^2.15.6",
     "n20-common-lib": "2.7.57",
+    "vxe-table": "^3.6.17",
     "qrcode": "^1.5.0",
     "resize-detector": "^0.3.0",
     "vue": "^2.6.11",
@@ -30,8 +30,7 @@
     "vuex": "^3.6.2"
   },
   "files": [
-    "src/components",
-    "src/index.js"
+    "src/components"
   ],
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",

package/src/components/invoiceDetail/index.vue

@@ -0,0 +1,153 @@
+<template>
+  <cl-dialog v-drag width="80%" :destroy-on-close="true" max-dialog :visible.sync="invoiceVisible" title="发票详情">
+    <cl-page>
+      <template slot="header">
+        <cl-tertiary-tab class="m-b-s m-t-s" :init.sync="name" :data="tabList" @click="clickTab" />
+      </template>
+      <div class="wrapperCss">
+        <template v-if="name === '发票信息'">
+          <div class="flex-box">
+            <div class="wrapperLeft">
+              <invoiceTemplateDetail v-model="formData"></invoiceTemplateDetail>
+            </div>
+
+            <div class="wrapperRight">
+              <iframe class="invoiceImg" :src="'/api/onlinePreview?beid=' + beid" frameborder="0" v-if="beid"></iframe>
+              <cl-empty :type="`empty`" content="暂无图片" :width="400" v-else></cl-empty>
+            </div>
+          </div>
+        </template>
+
+        <template v-if="name === '额度占用信息'">
+          <quotaInfor :type="'invoice'" :tradeId="query.invoiceId"></quotaInfor>
+        </template>
+
+        <div class="tableHeight">
+          <occupationLog :invoiceId="query.invoiceId" v-if="name === '占用释放记录'"></occupationLog>
+          <invoiceLog :sourceId="query.invoiceId" v-if="name === '发票操作记录'"></invoiceLog>
+        </div>
+      </div>
+    </cl-page>
+  </cl-dialog>
+</template>
+
+<script>
+import invoiceTemplateDetail from './invoiceTemplateDetail.vue'
+import quotaInfor from './quotaInfor.vue'
+import invoiceLog from './invoiceLog.vue'
+import occupationLog from './occupationLog.vue'
+export default {
+  name: 'invoiceDetail',
+  props: {
+    value: {
+      require: true
+    }
+  },
+  components: {
+    quotaInfor,
+    invoiceLog,
+    invoiceTemplateDetail,
+    occupationLog
+  },
+  data() {
+    return {
+      invoiceVisible: false,
+      name: '发票信息',
+      tabList: [{ name: '发票信息' }, { name: '额度占用信息' }, { name: '占用释放记录' }, { name: '发票操作记录' }],
+      formData: {}, // 发票信息变量
+      beid: '', // 发票附件fileId
+      query: {}
+    }
+  },
+  watch: {},
+  created() {},
+  methods: {
+    async clickTab(item) {
+      this.name = item.name
+    },
+
+    /**
+     * @param data  调用示例setInfo({invoiceId:invoiceId}) invoiceId发票ID
+     * @returns {Promise<void>}  获取发票信息并弹出发票详情窗口
+     */
+    setInfo(data) {
+      this.name = '发票信息'
+      this.formData = {}
+      this.query = data
+      this.setInvoice()
+      this.invoiceVisible = true
+    },
+    /** 获取发票信息 */
+    async setInvoice() {
+      const { code, data } = await this.$axios.get(`/tbm/invoice-info/${this.query.invoiceId}`, {
+        loading: false
+      })
+      if (code === 200) {
+        this.formData = data
+        this.beid = data?.fileId
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.wrapperCss {
+  height: 100%;
+  .wrapperLeft {
+    height: 100%;
+    width: 500px;
+    overflow-y: scroll;
+  }
+  .tableHeight {
+    height: 450px;
+  }
+  .n20-empty {
+    height: 98%;
+    padding-bottom: 0;
+    overflow: hidden;
+  }
+  .wrapperRight {
+    height: 65vh;
+    flex: 1;
+    .agnc {
+      text-align: center;
+    }
+    .upload-wrap,
+    .invoiceImg {
+      position: relative;
+      flex: 1;
+      height: 100%;
+      border: 1px solid #ebeef5;
+      width: 100%;
+      border-radius: 5px;
+      margin-left: 20px;
+      overflow: auto;
+    }
+    .rotateCss {
+      position: absolute;
+      bottom: 88px;
+      right: 40px;
+    }
+    .upload-wrap {
+      position: relative;
+      & > div {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 450px;
+        margin: 0 auto;
+        & > p {
+          font-size: 12px;
+          color: #999;
+        }
+      }
+      .upload-icon {
+        cursor: pointer;
+        color: #008df0;
+        font-size: 50px;
+      }
+    }
+  }
+}
+</style>

package/src/components/invoiceDetail/invoiceLog.vue

@@ -0,0 +1,280 @@
+<!--发票操作记录-->
+<template>
+  <cl-page>
+    <div slot="header">
+      <div class="row_between_center m-b-s m-t-s flex-box">
+        <div class="row_start_center">
+          <el-form :inline="true" @submit.native.prevent>
+            <el-form-item label="操作日期">
+              <cl-date-picker-por
+                :start-date.sync="filterData.starDate"
+                :end-date.sync="filterData.endDate"
+                type="daterange"
+                :clearable="false"
+                value-format="yyyy-MM-dd"
+                @change="getList"
+              />
+            </el-form-item>
+          </el-form>
+        </div>
+      </div>
+    </div>
+    <cl-table-pro
+      ref="table"
+      :data="tableData"
+      :show-setsize="true"
+      height="100%"
+      :small="{ border: true, size: 'small', stripe: false }"
+      :columns="columns"
+    >
+      <vxe-column
+        slot="operDetail"
+        slot-scope="{ column }"
+        v-bind="{ ...column, field: column.prop, title: column.label }"
+      >
+        <template slot-scope="{ row }">
+          <div style="color: var(--color-primary); cursor: pointer" @click="viewDetail(row)">详情</div>
+        </template>
+      </vxe-column>
+    </cl-table-pro>
+
+    <div slot="footer" class="flex-box flex-lr m-t-s">
+      <div></div>
+      <cl-pagination
+        :page-obj="page"
+        :page-key="{ no: 'current', size: 'pageSize', total: 'totalSize' }"
+        :page-sizes="[200, 400, 600, 800]"
+        @change="getList"
+      />
+    </div>
+    <cl-dialog
+      :title="title + '详情'"
+      :visible.sync="contractVisible"
+      append-to-body
+      :close-on-click-modal="true"
+      :close-on-press-escape="false"
+      top="10vh"
+      width="60%"
+    >
+      <cl-page heght="100%">
+        <div slot="header" class="m-b-s">
+          <span>操作类型：</span>
+          <span class="color-warning">{{ title }}</span>
+          &nbsp;
+          <span>操作时间：</span>
+          <span class="color-warning">{{ optTime }}</span>
+        </div>
+        <cl-table-pro
+          :data="contractTableData"
+          :show-setsize="true"
+          height="350px"
+          :small="{ border: true, size: 'small', stripe: false }"
+          :columns="contractColumns"
+        >
+          <vxe-column
+            slot="bgProp"
+            slot-scope="{ column }"
+            v-bind="{ ...column, field: column.prop, title: column.label }"
+          >
+            <template slot-scope="{ row }">
+              <span v-if="isNaN(Number(row[column.prop]))">{{ row[column.prop] }}</span>
+              <span v-else>{{ row[column.prop] | toThousands }}</span>
+            </template>
+          </vxe-column>
+        </cl-table-pro>
+      </cl-page>
+      <div slot="footer" class="flex-box flex-lr m-t-s">
+        <div class="row_start_center">
+          <cl-statis-item type="全部合计" :list="[{ label: '笔数', value: contractPage.totalSize }]" />
+        </div>
+        <cl-pagination
+          :page-obj="contractPage"
+          :page-key="{ no: 'current', size: 'pageSize', total: 'totalSize' }"
+          :page-sizes="[200, 400, 600, 800]"
+          @change="viewDetail(row)"
+        />
+      </div>
+    </cl-dialog>
+  </cl-page>
+</template>
+
+<script>
+import { dayjs } from 'n20-common-lib'
+export default {
+  components: {},
+  props: {
+    sourceId: {
+      type: [String, Number],
+      default: () => {
+        return ''
+      }
+    }
+  },
+  watch: {
+    sourceId: {
+      handler(newval) {
+        this.getList()
+      },
+      deep: true
+    }
+  },
+  data() {
+    return {
+      tableData: [],
+      columns: [
+        {
+          label: '操作时间',
+          prop: 'createTime',
+          align: 'center',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        },
+        {
+          label: '操作用户',
+          prop: 'operater',
+          align: 'center',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        },
+        {
+          label: '操作用户姓名',
+          prop: 'operaterName',
+          align: 'center',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        },
+        {
+          label: '操作用户单位名称',
+          prop: 'memberName',
+          align: 'center',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        },
+        {
+          label: '操作',
+          prop: 'logTypeEnum',
+          align: 'center',
+          width: 100,
+          'show-overflow-tooltip': true,
+          type: 'html',
+          formatter: ({ row }) => {
+            return `<span>${row.logTypeEnum && row.logTypeEnum.name}</span>`
+          }
+        }
+      ],
+      orders: [],
+      filterData: {
+        starDate: dayjs().date(1).format('YYYY-MM-DD'),
+        endDate: dayjs(new Date()).format('YYYY-MM-DD')
+      },
+      page: {
+        current: 1,
+        pageSize: 200,
+        totalSize: 0
+      },
+      title: '',
+      optTime: '',
+      row: {},
+      contractVisible: false,
+      contractTableData: [],
+      contractColumns: [
+        {
+          label: '字段',
+          prop: 'paramName',
+          align: 'center',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        },
+        {
+          label: '变更前',
+          prop: 'oldValue',
+          align: 'right',
+          slotName: 'bgProp',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        },
+        {
+          label: '变更后',
+          prop: 'newValue',
+          align: 'right',
+          slotName: 'bgProp',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        },
+        {
+          label: '生效日期',
+          prop: 'updateTime',
+          align: 'center',
+          minWidth: 140,
+          'show-overflow-tooltip': true
+        }
+      ],
+      contractPage: {
+        current: 1,
+        pageSize: 200,
+        totalSize: 0
+      }
+    }
+  },
+  mounted() {
+    this.getList()
+  },
+  activated() {},
+  methods: {
+    async getList() {
+      this.$set(this.filterData, 'sourceType', 'INVOICE_OPER')
+      this.$set(this.filterData, 'sourceId', this.sourceId)
+      const obj = {
+        current: this.page.current,
+        data: this.filterData,
+        orders: this.orders,
+        size: this.page.pageSize
+      }
+      const { code, data } = await this.$axios.post('/tbm/operLog/log/list', obj, {
+        loading: false
+      })
+      if (code === 200) {
+        this.tableData = data.records || []
+        this.page.totalSize = data.total
+      }
+    },
+    async viewDetail(row) {
+      this.row = row
+      this.title = row.logTypeEnum.name
+      this.optTime = row.createTime
+      // INVOICE_CANCEL 作废  INVOICE_CANCEL 新增 INVOICE_ACTIVE
+      if (row.logTypeEnum.code === 'INVOICE_ACTIVE' || row.logTypeEnum.code === 'INVOICE_CANCEL') {
+        // 新增发票/发票作废
+        this.$refs.addEditDetail.setInfo(row, row.logTypeEnum.code)
+      } else {
+        // 发票修改
+        this.contractVisible = true
+        const obj = {
+          current: this.contractPage.current,
+          data: {
+            parentLogId: row.logId
+          },
+          orders: this.orders,
+          size: this.contractPage.pageSize
+        }
+        const { code, data } = await this.$axios.post('/tbm/operLog/log/list', obj, {
+          loading: false
+        })
+        if (code === 200) {
+          this.contractTableData = data.records || []
+          this.contractPage.totalSize = data.total
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+/deep/ .el-form-item {
+  margin-bottom: 0;
+}
+.flex-column {
+  height: calc(100% - 50px);
+}
+</style>

package/src/components/invoiceDetail/invoiceTemplateDetail.vue

@@ -0,0 +1,99 @@
+<!-- 发票信息(静态)-组件-全局使用 -->
+<template>
+  <el-descriptions class="n20-descriptions" :column="1" size="default" border>
+    <template v-for="(item, index) in formColums">
+      <el-descriptions-item :key="index" :label="item.attrName" v-if="isShowFunc(item)">
+        <template v-if="type == 'invoice'">
+          <span :class="item.attrName.indexOf('金额') > -1 ? 'color-primary' : ''">
+            {{ valueFormat(item, value) }}
+          </span>
+        </template>
+        <template v-else-if="type == 'cldiff'">
+          <cl-diff
+            :value="valueFormat(item, value)"
+            :old-value="valueFormat(item, oldFormData)"
+            :tooltip="oldFormData?.submiterName + oldFormData?.submitDate + '修改'"
+          />
+        </template>
+      </el-descriptions-item>
+    </template>
+    <slot name="endDate"></slot>
+  </el-descriptions>
+</template>
+<script>
+import { numerify } from 'n20-common-lib'
+export default {
+  watch: {
+    'value.contractType': {
+      handler(newval) {
+        this.getContractDetailSetting()
+      },
+      deep: true
+    }
+  },
+  props: {
+    oldFormData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    type: {
+      type: String,
+      default: 'invoice'
+    },
+    value: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  created() {
+    this.getContractDetailSetting()
+  },
+  data() {
+    return {
+      formColums: []
+    }
+  },
+  methods: {
+    numerify,
+    valueFormat(item, value) {
+      let v = ''
+      if (value[item.attrCode]?.constructor === Object) {
+        v = value[item.attrCode]?.name
+      } else if (value && item.attrName.indexOf('元') > -1) {
+        v = numerify(value[item.attrCode], '0,0.00')
+      } else {
+        v = value[item.attrCode]
+      }
+      return String(v || '--')
+    },
+    // 是否显示特殊处理
+    isShowFunc(item) {
+      let show = item.display == 1 ? true : false
+      return show
+    },
+    // 动态获取合同动态信息
+    async getContractDetailSetting() {
+      const obj = {
+        current: 1,
+        data: {
+          scId: -1
+        },
+        size: 1000
+      }
+      await this.$axios
+        .post('/tbm/setupBase/modelSetup/list?key=invoice', obj, {
+          loading: false
+        })
+        .then(res => {
+          if (res.code === 200) {
+            this.formColums = res.data?.records
+          }
+        })
+    }
+  }
+}
+</script>