n20-common-lib 1.3.1 → 1.3.4

package/style/pageDemo/demo-1.vue

@@ -0,0 +1,131 @@
+<template>
+  <cl-page>
+    <template slot="header">
+      <cl-secondary-tab :init.sync="name" :data="list" />
+      <div class="flex-box flex-v m-b">
+        <cl-tertiary-tab :init.sync="name" :data="list" />
+        <el-button
+          plain
+          size="mini"
+          style="margin-left: auto"
+          @click="seeCode('demo-1')"
+          >查看代码</el-button
+        >
+        <el-button class="button-4em" plain size="mini">删除</el-button>
+        <cl-filters class="m-l-s" :form="form" :filter-list="filterList" />
+        <cl-dialog title="选择名称" :visible.sync="sltV">
+          <pre>{{ form }}</pre>
+        </cl-dialog>
+      </div>
+    </template>
+
+    <cl-table
+      :border="true"
+      :data="tableData"
+      :columns="columnList"
+      height="100%"
+    />
+
+    <div slot="footer" class="page-footer-shadow flex-box flex-v m-t">
+      <cl-statis
+        :page-sum="page.size"
+        :page-amount="page.amount"
+        :total-sun="page.totalSize"
+        :total-amount="page.sumAmount"
+      />
+      <cl-pagination
+        :page-obj="page"
+        :page-key="{ no: 'pageNo', size: 'pageSize', total: 'totalSize' }"
+        style="margin-left: auto"
+        @change="getList"
+      />
+    </div>
+  </cl-page>
+</template>
+
+<script>
+import seeCode from './seeCode'
+
+let tableDataItem = {
+  id: 'n1',
+  type: '001',
+  name: '信贷合同-1',
+  time: '2021-09-29 20:05:56',
+  user: '张三',
+  url: 'http://192.168.60.58:5001/bems/1.0/attach/%E6%91%B9%E5%AE%A2%E5%85%8D%E8%B4%B9100.png'
+}
+export default {
+  mixins: [seeCode], // 查看代码的代码
+  data() {
+    let _this = this
+    return {
+      // 二级/三级菜单
+      list: [
+        { name: '对公转账', icon: 'el-icon-share', path: '/ibs-pay' },
+        { name: '对私转账', disabled: true, path: '/ibs-pay1' },
+        { name: '经销商转账', path: '/ibs-pay2' }
+      ],
+      name: '对公转账',
+      // 筛选
+      form: {},
+      filterList: [
+        { label: '名称', type: 'text', value: 'oN' },
+        {
+          label: '选择名称',
+          type: 'text',
+          value: 'oN',
+          on: {
+            focus() {
+              _this.sltV = true
+            }
+          }
+        },
+        { label: '金额', type: 'number', value: 'num' },
+        {
+          label: '金额区间',
+          type: 'numberrange',
+          startValue: 'numMin',
+          endValue: 'numMax'
+        },
+        { label: '创建日期', type: 'date', value: 'date' },
+        {
+          label: '时间区间',
+          type: 'daterange',
+          startDate: 'startDate',
+          endDate: 'endDate'
+        }
+      ],
+      // 表格
+      columnList: [
+        { type: 'index', label: '序号', width: 50, align: 'center' },
+        { prop: 'id', label: 'id', width: 100, align: 'center' },
+        { prop: 'type', label: '类型', align: 'center' },
+        { prop: 'name', label: '名称' },
+        { prop: 'time', label: '时间' },
+        { prop: 'user', label: '用户' },
+        { prop: 'url', label: '地址', 'show-overflow-tooltip': true }
+      ],
+      tableData: Array(100).fill(tableDataItem),
+      // 分页
+      page: {
+        pageNo: 1,
+        pageSize: 20,
+        totalSize: 100,
+        par1: 'xxx',
+        par2: 'yyy',
+        par3: 'zzz',
+        size: 8,
+        amount: 12314,
+        sumAmount: 213132
+      },
+
+      sltV: false
+    }
+  },
+  methods: {
+    getList() {
+      console.log(this.page)
+    }
+  }
+}
+</script>

package/style/pageDemo/demo-2.vue

@@ -0,0 +1,35 @@
+<template>
+  <cl-page>
+    <div slot="header" class="bd-b p-b-s">
+      <el-button type="primary">头部固定</el-button>
+      <el-button
+        class="float-right"
+        plain
+        size="mini"
+        @click="seeCode('demo-2')"
+        >查看代码</el-button
+      >
+    </div>
+
+    <div class="flex-box" style="height: 100%">
+      <div class="p-t-s p-b-s bd-r" style="width: 240px; overflow: auto">
+        <div v-for="i in 100" :key="i">左边-宽度占240px</div>
+      </div>
+      <div class="flex-item flex-column x------x p-t-s p-b-s p-l-s">
+        <div class="flex-item" style="overflow: auto">
+          <div v-for="i in 100" :key="i">右边-宽度剩下的部分</div>
+        </div>
+        <div class="bd-t p-t-s text-r">
+          <el-button>右侧的底部固定</el-button>
+        </div>
+      </div>
+    </div>
+  </cl-page>
+</template>
+
+<script>
+import seeCode from './seeCode'
+export default {
+  mixins: [seeCode] // 查看代码的代码
+}
+</script>

package/style/pageDemo/demo-3.vue

@@ -0,0 +1,22 @@
+<template>
+  <cl-page>
+    <div slot="header" class="bd-b p-b-s">
+      <el-button type="primary">头部固定</el-button>
+      <el-button
+        class="float-right"
+        plain
+        size="mini"
+        @click="seeCode('demo-3')"
+        >查看代码</el-button
+      >
+    </div>
+    <div v-for="i in 100" :key="i">内容内容内容内容</div>
+  </cl-page>
+</template>
+
+<script>
+import seeCode from './seeCode'
+export default {
+  mixins: [seeCode] // 查看代码的代码
+}
+</script>

package/style/pageDemo/seeCode.js

@@ -0,0 +1,20 @@
+import hljs from 'highlight.js'
+const prefix = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ || process.env.BASE_URL || '/'
+
+export default {
+  methods: {
+    async seeCode(d) {
+      let data = await this.$axios.get(`${prefix}pageDemo/${d}.vue`)
+      this.$msgboxPor({
+        title: '页面代码',
+        message: (
+          <div class='highlight sl-y' style='width: 100%;height: 500px;overflow: auto;'>
+            <pre domPropsInnerHTML={hljs.highlightAuto(data).value}></pre>
+          </div>
+        ),
+        dangerouslyUseHTMLString: true,
+        customClass: 'seecode-pop'
+      })
+    }
+  }
+}