swordpass-ui 1.0.0

package/packages/OnlineForm/src/Form.vue

@@ -0,0 +1,359 @@
+<template>
+  <div name="online-form">
+    <el-skeleton v-if="loadStatus == 0" :rows="6" animated />
+    <cl-runtime-template
+      v-else-if="loadStatus > 0"
+      :name="formName"
+      :data="data"
+      :permission="permission"
+      :is-view="isView"
+      :is-print="isPrint"
+      :mobile-mode="mobileMode"
+      :form-key="formKey"
+      class="online-form-wrap form-table__wrap"
+      :init-fill-data="initFillData"
+      :extend-prop="extendProp"
+      :is-support-mobile="isSupportMobile"
+      :inst-id="instId"
+      @load-fail="handleLoadFail"
+      @load-success="handleLoadSuccess"
+    />
+    <div v-else class="loaded-fail__div">
+      表单加载失败,可能是表单配置发生了变化,请联系管理员...
+    </div>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import onlineHottable from '@/mixins/onlineHottable.js'
+  import onlineSubtable from '@/mixins/onlineSubtable.js'
+  import regionValidator from '@/mixins/regionValidator.js'
+  import emitter from '@/mixins/emitter.js'
+
+  import Vue from 'vue'
+  export default {
+    name: 'ClOnlineForm',
+    componentName: 'ClOnlineForm',
+    mixins: [regionValidator, emitter],
+    props: {
+      html: String,
+      data: Object,
+      permission: Object,
+      initFillData: {
+        type: Boolean,
+        default: false,
+      },
+      isView: {
+        type: Boolean,
+        default: false,
+      },
+      isPrint: {
+        type: Boolean,
+        default: false,
+      },
+      isLook: {
+        type: Boolean,
+        default: false,
+      },
+      mobileMode: {
+        type: Boolean,
+        default: false,
+      },
+      flowKey: String,
+      formId: String,
+      formKey: String,
+      extendProp: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+      isSupportMobile: {
+        type: Boolean,
+        default: false,
+      },
+      instId: [String, Number],
+    },
+    data() {
+      return {
+        formName: `onlineForm_${utils.getName()}`,
+        loadStatus: 0,
+        subBackfill: new Map(),
+        hotTableFillback: String,
+        scopeName: `form-${utils.getName()}`,
+        getDataPromiseResolve: null,
+        getDataPromiseReject: null,
+      }
+    },
+    watch: {
+      html: {
+        handler: function(newVal) {
+          if (newVal) {
+            this.init()
+          }
+        },
+        immediate: true,
+      },
+    },
+    created() {
+      this.$on('global-validate-result', (result) => {
+        if (result) {
+          this.getDataPromiseResolve(this.data)
+        } else {
+          this.getDataPromiseReject()
+        }
+      })
+    },
+    methods: {
+      handleLoadSuccess(res) {
+        this.loadStatus = 1
+        this.$emit('load-success', res)
+      },
+      handleLoadFail() {
+        this.loadStatus = -1
+      },
+      getData(validate) {
+        return new Promise((resolve, reject) => {
+          this.getDataPromiseResolve = resolve
+          this.getDataPromiseReject = reject
+          if (!validate) {
+            resolve(this.data)
+          } else {
+            // 执行校验逻辑
+            this.validateRegion(`[name='${this.formName}']`).then(
+              (errorItems) => {
+                if (errorItems.length > 0) {
+                  reject(errorItems)
+                } else {
+                  this.broadcast('ClGlobalValidate', 'global-validate')
+                }
+              }
+            )
+          }
+        })
+      },
+      init() {
+        this.loadStatus = 1
+        Vue.component('cl-runtime-template', {
+          componentName: 'ClRuntimeTemplate',
+          mixins: [onlineHottable, onlineSubtable],
+          props: {
+            html: String,
+            data: Object,
+            permission: Object,
+            initFillData: {
+              type: Boolean,
+              default: false,
+            },
+            isView: {
+              type: Boolean,
+              default: false,
+            },
+            isPrint: {
+              type: Boolean,
+              default: false,
+            },
+            formKey: String,
+            mobileMode: {
+              type: Boolean,
+              default: false,
+            },
+            extendProp: {
+              type: Object,
+              default: () => {
+                return {}
+              },
+            },
+            isSupportMobile: {
+              type: Boolean,
+              default: false,
+            },
+            instId: [String, Number],
+          },
+          template: this.html,
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss">
+  .transition {
+    outline: 1px dotted #85a5ff;
+    outline-width: 2px;
+    outline-offset: -1px;
+  }
+  .el-tabs--border-card {
+    border: 1px solid #ebeef5;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+  }
+
+  .tabcheck_btn {
+    text-align: right;
+    padding-top: 20px;
+  }
+  .loaded-fail__div {
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    color: #f56c6c;
+  }
+  .main-table {
+    border-collapse: separate;
+    margin-bottom: 20px;
+    tr > td {
+      &:empty {
+        border: none !important;
+      }
+    }
+  }
+  @media print {
+    .printHide {
+      display: none;
+    }
+    .main-field {
+      line-height: 1.5 !important;
+    }
+    .el-main {
+      padding: 0px !important;
+    }
+    .sub-table-header ::v-deep th {
+      min-width: 110px !important;
+    }
+    colgroup {
+      display: none !important;
+    }
+    .el-table__header {
+      width: 100% !important;
+    }
+    .el-table__body {
+      width: 100% !important;
+    }
+    .el-table_1_column_1 {
+      width: 60px !important;
+    }
+    .el-table_1_column_3 {
+      width: 100px !important;
+    }
+    .el-table_1_column_4 {
+      width: 100px !important;
+    }
+    .el-table_1_column_5 {
+      display: none !important;
+    }
+    .gutter {
+      display: none !important;
+    }
+    .form-table {
+      border: 1px solid rgb(238, 235, 235) !important;
+    }
+    .form-table > tbody > tr > th,
+    .form-table > tbody > tr > td,
+    .form-table > tfoot > tr > td,
+    .form-table > thead > tr > th {
+      border: 1px solid rgb(238, 235, 235) !important;
+    }
+    .el-table__header {
+      border: 1px solid rgb(238, 235, 235) !important;
+    }
+    .el-table__header > tbody > tr > th,
+    .el-table__header > tbody > tr > td,
+    .el-table__header > tfoot > tr > td,
+    .el-table__header > thead > tr > th {
+      border: 1px solid rgb(238, 235, 235) !important;
+    }
+    .el-table__body > tbody > tr > th,
+    .el-table__body > tbody > tr > td,
+    .el-table__body > tfoot > tr > td,
+    .el-table__body > thead > tr > th {
+      border: 1px solid rgb(238, 235, 235) !important;
+    }
+    .el-table th.is-leaf,
+    .el-table td {
+      border-bottom: 1px solid rgb(238, 235, 235) !important;
+    }
+  }
+  .main-title {
+    word-break: break-all;
+    text-align: right;
+    font-weight: 100;
+    color: #545252;
+    font-size: 12px;
+    padding: 0px 10px !important;
+    font-weight: bold;
+    line-height: 28px;
+  }
+  .main-field {
+    padding: 10px;
+    line-height: 0;
+    .unit {
+      display: inline-block;
+    }
+  }
+  .online-form-wrap {
+    [name='online-form'] .el-date-editor.el-input,
+    .el-date-editor.el-input__inner {
+      width: 100%;
+    }
+    .el-input {
+      width: 100% !important;
+    }
+    .amap-page-container {
+      .amap-toolbar,
+      .amap-geolocation-con,
+      .amap-scalecontrol,
+      .amap-logo,
+      .amap-copyright {
+        z-index: 1 !important;
+      }
+    }
+  }
+  .el-tooltip__popper {
+    p {
+      width: 300px;
+    }
+  }
+  .xh_table tfoot td:empty {
+    padding: 0 !important;
+    border: none !important;
+  }
+  .online-form-wrap {
+    .table_layout_wrap,
+    .grandson_table_wrap {
+      overflow: auto;
+    }
+    .table_layout_wrap {
+      td {
+        .inputs {
+          position: relative;
+        }
+      }
+    }
+  }
+  .inputs {
+    .file-list__wrap {
+      padding-left: 0;
+      .file-item {
+        .file-icon,
+        .file-close__icon {
+          padding-top: 11px;
+        }
+      }
+    }
+  }
+  .form-table__wrap {
+    .form-table > thead > tr > th:last-child {
+      min-width: 100px !important;
+    }
+  }
+  .inputs {
+    .edui-default .edui-editor {
+      border: none;
+    }
+  }
+  td.is-required:before {
+    content: '*';
+    color: #f56c6c;
+    margin-right: 4px;
+  }
+</style>

package/packages/OrgPostDialog/index.js

@@ -0,0 +1,7 @@
+import OrgPostDialog from './src/main.vue'
+
+OrgPostDialog.install = function(Vue) {
+  Vue.component(OrgPostDialog.name, OrgPostDialog)
+}
+
+export default OrgPostDialog

package/packages/OrgPostDialog/src/main.vue

@@ -0,0 +1,244 @@
+<template>
+  <div class="inputs">
+    <el-dialog
+      :title="dialogTitile"
+      :visible.sync="dialogVisible"
+      class="dialog-selector__wrapper"
+      top="6vh"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :append-to-body="appendToBody"
+      :destroy-on-close="destroyOnClose"
+    >
+      <el-container>
+        <el-aside width="210px" class="left-aside">
+          <el-card class="box-card org-find-card" shadow="never">
+            <div slot="header" class="clearfix">
+              <span>按组织查找</span>
+            </div>
+            <cl-select
+              v-model="currentDemension"
+              size="small"
+              :options="demensions"
+              :props="{ key: 'id', value: 'demName' }"
+              :remote-method="loadDemensions"
+              @change="changeDemension"
+            />
+            <cl-tree
+              ref="tree"
+              lazy
+              :load="loadOrgTree"
+              :data="orgs"
+              :default-expand-all="false"
+              :highlight-current="true"
+              :props="{ children: 'children', label: 'name', isLeaf: 'leaf' }"
+              :node-key="nodeKey"
+              :default-expanded-keys="defaultExpandedKeys"
+              class="org-tree"
+              accordion
+              @node-click="handleNodeClick"
+            ></cl-tree>
+          </el-card>
+        </el-aside>
+        <el-container>
+          <el-main>
+            <cl-selector
+              ref="selector"
+              v-model="selectors"
+              :data="data"
+              :pagination="pagination"
+              :table-columns="tableColumns"
+              :select-label="selectLabel"
+              :quick-search-props="quickSearchProps"
+              :single="single"
+              :search-placeholder="searchPlaceholder"
+              @load="load"
+            />
+          </el-main>
+        </el-container>
+      </el-container>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" size="small" @click="handleDialogSure">
+          确 定
+        </el-button>
+        <el-button size="small" @click="handleDialogCancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+  import ClSelector from '../../Selector/index'
+  import { setTimeout } from 'timers'
+
+  export default {
+    name: 'ClOrgPostDialog',
+    components: {
+      ClSelector,
+    },
+    props: {
+      dialogTitile: {
+        type: String,
+        default: '对话框',
+      },
+      demensions: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      orgs: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      loadOrgTree: {
+        type: Function,
+      },
+      value: String,
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      data: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      tableColumns: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            page: 1,
+            pageSize: 50,
+            total: 0,
+          }
+        },
+      },
+      selectLabel: {
+        type: String,
+        default: 'name',
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      defaultDemension: {
+        type: [String, Number],
+        default: '',
+      },
+      quickSearchProps: {
+        type: String,
+        required: true,
+      },
+      nodeKey: {
+        type: String,
+        default: 'id',
+      },
+      defaultExpandedKeys: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      destroyOnClose: {
+        type: Boolean,
+        default: false,
+      },
+      searchPlaceholder: {
+        type: String,
+        default: '名称、编码',
+      },
+    },
+    data() {
+      return {
+        inputName: null,
+        selectors: [],
+        dialogVisible: false,
+        currentDemension: null,
+      }
+    },
+    watch: {
+      defaultDemension: function(newVal, oldVal) {
+        if (newVal && newVal != oldVal) {
+          this.currentDemension = newVal
+          this.changeDemension()
+        }
+      },
+    },
+    methods: {
+      // 同步value到当前所选数据中
+      showDialog(selectors) {
+        this.dialogVisible = true
+        this.loadDemensions()
+        if (!selectors) {
+          selectors = []
+        }
+        setTimeout(() => {
+          this.$refs.selector.onShow(selectors)
+        })
+      },
+      handleClose(done) {
+        this.$refs.selector.onHide()
+        done && done()
+      },
+      handleDialogSure() {
+        this.dialogVisible = false
+        this.$refs.selector.onHide(true)
+        this.$emit('onConfirm', this.selectors)
+      },
+      handleDialogCancel() {
+        this.dialogVisible = false
+        this.$refs.selector.onHide()
+      },
+      handleRemove(item) {
+        this.selectors.remove(item)
+      },
+      load(param, cb) {
+        this.$emit('load', param, cb)
+      },
+      changeDemension() {
+        this.$emit('changeDemension', this.currentDemension)
+      },
+      handleNodeClick(data) {
+        this.$emit('loadListData', data)
+      },
+      loadDemensions() {
+        this.$emit('loadDemensions')
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~@/styles/selector.scss';
+  .inputs {
+    display: block;
+  }
+
+  .el-select__tags {
+    background: #fff;
+    margin-left: 1px;
+  }
+
+  .el-select__tags_readonly {
+    position: relative;
+    top: 50%;
+  }
+
+  .el-input__inner[aria-invalid='true'] {
+    border-color: #f56c6c;
+  }
+  div.org-find-card ::v-deep .el-card__body {
+    padding: 10px;
+    max-height: 520px;
+    overflow: auto;
+  }
+</style>

package/packages/OrgSelector/index.js

@@ -0,0 +1,7 @@
+import OrgSelector from './src/main.vue'
+
+OrgSelector.install = function(Vue) {
+  Vue.component(OrgSelector.name, OrgSelector)
+}
+
+export default OrgSelector