swordpass-ui 1.0.0

package/packages/Tabs/src/Tabs.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <el-tabs
+      ref="tabs"
+      v-model="val"
+      :tab-position="tabPosition"
+      :before-leave="beforeLeaveTab"
+      :type="type"
+      :active-name="activeName"
+      :closable="closable"
+      :addable="addable"
+      :editable="editable"
+      :stretch="stretch"
+      @tab-click="tabClickHandle"
+      @tab-remove="tabRemoveHandle"
+      @tab-add="tabAddHandle"
+      @edit="tabEditHandle"
+    >
+      <slot></slot>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import regionValidator from '@/mixins/regionValidator.js'
+
+  export default {
+    name: 'ClTabs',
+    mixins: [regionValidator],
+    props: {
+      tabsValue: String,
+      type: String,
+      activeName: String,
+      beforeLeave: Function,
+      closable: {
+        type: Boolean,
+        default: false,
+      },
+      addable: {
+        type: Boolean,
+        default: false,
+      },
+      editable: {
+        type: Boolean,
+        default: false,
+      },
+      tabPosition: {
+        type: String,
+        default: 'top',
+      },
+      stretch: {
+        type: Boolean,
+        default: false,
+      },
+      isVerify: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        val: this.tabsValue,
+      }
+    },
+    mounted() {
+      let me_ = this
+      this.$refs.tabs.$watch('panes', function() {
+        me_.val = me_.getShowPanes(me_.val)
+      })
+    },
+    methods: {
+      beforeLeaveTab(activeName, oldActiveName) {
+        // 切换tab时是否校验
+        if (this.isVerify) {
+          return new Promise((resolve, reject) => {
+            // 应用侧绑定了前置处理方法
+            if (this.beforeLeave) {
+              const result = this.beforeLeave(activeName, oldActiveName)
+              // 应用侧的前置处理方法返回了拒绝切换的结果时 直接 驳回切换操作
+              if (result && result.constructor == Promise) {
+                result.catch(() => reject())
+              } else if (
+                result != null &&
+                result != undefined &&
+                result === false
+              ) {
+                reject()
+              }
+            }
+            // 执行校验逻辑
+            this.validateRegion('.el-tab-pane:not([aria-hidden])').then(
+              (errorItems) => {
+                if (errorItems.length > 0) {
+                  reject()
+                } else {
+                  resolve()
+                }
+              }
+            )
+          })
+        } else {
+          // 不校验时直接 应用侧的结果 或 直接返回true
+          return this.beforeLeave
+            ? this.beforeLeave(activeName, oldActiveName)
+            : true
+        }
+      },
+      getShowPanes(key) {
+        let panes = this.$refs.tabs.panes
+        let name = ''
+        let flag = false
+        for (let i = 0; i < panes.length; i++) {
+          if (panes[i].name == key) {
+            flag = true
+          }
+          if (panes[i].$attrs.isShow && !name) {
+            name = panes[i].name
+          }
+        }
+        if (flag) {
+          return key
+        } else {
+          return name
+        }
+      },
+      tabClickHandle(tab) {
+        this.$emit('tab-click', tab)
+      },
+      tabRemoveHandle(tabName) {
+        this.$emit('tab-remove', tabName)
+      },
+      tabAddHandle() {
+        this.$emit('tab-add')
+      },
+      tabEditHandle(targetName, action) {
+        this.$emit('edit', targetName, action)
+      },
+    },
+  }
+</script>

package/packages/Tag/index.js

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

package/packages/Tag/src/main.vue

@@ -0,0 +1,264 @@
+<template>
+  <div
+    v-if="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <el-select
+      v-if="inputWriteable"
+      ref="fuzzySearch"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      style="width: 100%"
+      :size="inputSize"
+      :filterable="filterable"
+      :remote="filterable"
+      :remote-method="remoteMethod"
+      :multiple="multiple"
+      clearable
+      :name="inputName"
+      @focus="focusSelectValue"
+      @visible-change="visibleChange"
+    >
+      <div v-loading="loading">
+        <el-option
+          v-for="item in options"
+          :key="item.id"
+          :label="item.name"
+          :value="item.name"
+        ></el-option>
+      </div>
+
+      <div class="text-center">
+        <a class="text-normal">
+          <el-pagination
+            layout="prev, pager, next"
+            :page-size="pagination.pageSize"
+            :pager-count="5"
+            :current-page="pagination.page"
+            :total="pagination.total"
+            @current-change="currentChange"
+          ></el-pagination>
+        </a>
+      </div>
+      <div class="cl-tag__append">
+        <el-button v-if="creatingTag" size="small" type="primary" @click="add">
+          添加
+        </el-button>
+      </div>
+      <template v-if="creatingTag" slot="empty">
+        <div class="cl-tag__empty" @click="add">
+          <span>{{ currentQuery }}</span>
+        </div>
+      </template>
+    </el-select>
+    <cl-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputVal"
+      :tag-format-value="tagValue"
+    />
+  </div>
+</template>
+
+<script>
+  import permission from '@/mixins/permission.js'
+  import linkage from '@/mixins/linkage.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClTag',
+    mixins: [permission, inputName, linkage, form],
+    props: {
+      value: String,
+      filterable: {
+        type: Boolean,
+        default: false,
+      },
+      expand: {
+        type: Boolean,
+        default: false,
+      },
+      tagKey: String,
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        options: [],
+        pagination: {
+          pageSize: 5,
+          page: 1,
+          total: 0,
+        },
+        loading: false,
+        currentQuery: '',
+      }
+    },
+    computed: {
+      inputVal: {
+        set(value) {
+          if (value && this.multiple) {
+            this.$emit('input', value.join(','))
+          } else {
+            this.$emit('input', value)
+          }
+        },
+        get() {
+          if (this.value && this.multiple) {
+            return this.value.split(',')
+          }
+          return this.value
+        },
+      },
+      tagValue() {
+        return this.inputVal && this.inputVal.constructor == Array
+          ? this.inputVal
+          : this.inputVal && this.inputVal.constructor == String
+          ? [this.inputVal]
+          : []
+      },
+      creatingTag() {
+        return this.expand && this.currentQuery !== ''
+      },
+    },
+    mounted() {
+      this.search()
+    },
+    methods: {
+      focusSelectValue() {
+        if (this.$refs.fuzzySearch.$refs.input) {
+          this.$refs.fuzzySearch.$refs.input.blur = () => {
+            this.currentQuery = ''
+            this.search()
+          }
+        }
+      },
+      visibleChange(flag) {
+        //单选时输入框关闭时重新搜索内容
+        if (!flag && !this.multiple) {
+          this.currentQuery = ''
+          this.search()
+        }
+      },
+      remoteMethod(query) {
+        this.currentQuery = query
+        let param = {
+          pageBean: this.pagination,
+          querys: [
+            {
+              property: 'type_key_',
+              value: this.tagKey,
+              group: 'query',
+              operation: 'EQUAL',
+              relation: 'AND',
+            },
+          ],
+        }
+        if (query) {
+          param.querys.push({
+            property: 'name_',
+            value: query,
+            group: 'query',
+            operation: 'LIKE',
+            relation: 'AND',
+          })
+        }
+        this.loading = true
+        this.$requestConfig
+          .getTagList(param)
+          .then((data) => {
+            this.options = data.rows
+            this.pagination = {
+              pageSize: data.pageSize,
+              page: data.page,
+              total: data.total,
+            }
+          })
+          .finally(() => {
+            this.loading = false
+          })
+      },
+      currentChange(page) {
+        this.pagination.page = page
+        this.remoteMethod(this.currentQuery)
+      },
+      add() {
+        let param = {
+          name: this.currentQuery,
+          typeKey: this.tagKey,
+        }
+        this.$requestConfig
+          .saveTag(param)
+          .then((data) => {
+            if (data.state) {
+              this.$message({ type: 'success', message: '添加成功' })
+              this.remoteMethod(this.currentQuery)
+            }
+          })
+          .catch(() => {
+            this.$message({ type: 'error', message: '添加失败' })
+          })
+      },
+      search() {
+        let param = {
+          pageBean: this.pagination,
+          querys: [
+            {
+              property: 'type_key_',
+              value: this.tagKey,
+              group: 'query',
+              operation: 'EQUAL',
+              relation: 'AND',
+            },
+          ],
+        }
+        this.$requestConfig.getTagList(param).then((data) => {
+          this.options = data.rows
+          this.pagination = {
+            pageSize: data.pageSize,
+            page: data.page,
+            total: data.total,
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .text-center {
+    position: sticky;
+    background: #fff;
+    height: 30px;
+    top: 0;
+    z-index: 1;
+    text-align: center;
+  }
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+  .cl-tag__append {
+    text-align: center;
+    padding: 5px 0;
+  }
+  .cl-tag__empty {
+    background: #f5f7fa;
+    text-align: center;
+    margin: 5px 0;
+    padding: 8px 0;
+    cursor: pointer;
+  }
+</style>

package/packages/TemplateBatchUpdate/index.js

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

package/packages/TemplateBatchUpdate/src/TemplateBatchUpdateDialog.vue

@@ -0,0 +1,174 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogFormVisible"
+    :close-on-click-modal="false"
+    width="30%"
+    destroy-on-close
+  >
+    <el-form
+      v-form
+      data-vv-scope="custom-form"
+      label-width="100px"
+      style="width:100%;"
+      name="online-form"
+      :model="updateData"
+    >
+      <el-form-item
+        v-for="(item, index) in listForm"
+        :key="index"
+        :label="item.desc"
+      >
+        <template v-if="item.outType == 'input'">
+          <cl-input
+            v-model="updateData[item.name]"
+            style="width: 95%"
+            :validate="{ required: item.isRequired }"
+          ></cl-input>
+        </template>
+        <template v-if="item.outType == 'number'">
+          <cl-input
+            v-model="updateData[item.name]"
+            style="width: 95%"
+            type="number"
+            :validate="{ required: item.isRequired }"
+          ></cl-input>
+        </template>
+        <template v-if="item.outType == 'data'">
+          <cl-date
+            v-model="updateData[item.name]"
+            style="width: 95%"
+            :validate="{ required: item.isRequired }"
+          ></cl-date>
+        </template>
+        <template v-if="item.outType == 'select'">
+          <cl-select
+            v-model="updateData[item.name]"
+            :validate="{ required: item.isRequired }"
+            model-name="updateData[item.name]"
+            placeholder=""
+            :ganged="item.ganged"
+            :multiple="false"
+            :filterable="false"
+            :allow-create="false"
+            permission="w"
+            :selectlist="item.selectData"
+            style="width: 95%"
+          >
+            <span slot="labeldesc">字符串</span>
+          </cl-select>
+        </template>
+        <template v-if="item.outType == 'dialog'">
+          <cl-custom-dialog
+            v-model="updateData[item.name]"
+            :validate="{ required: item.isRequired }"
+            :model-name="`updateData.${item.name}`"
+            :custdialog="item.custdialog"
+            permission="w"
+            style="width: 95%"
+          ></cl-custom-dialog>
+        </template>
+        <template v-else-if="item.outType == 'user'">
+          <cl-user-selector-input
+            v-model="updateData[item.name]"
+            style="width: 95%"
+            :validate="{ required: item.isRequired }"
+            :select-current="item.selectCurrent"
+            :single="item.single"
+            :append-to-body="true"
+            :config="item.bindConfig"
+          />
+        </template>
+        <template v-else-if="item.outType == 'org'">
+          <cl-org-selector-input
+            v-model="updateData[item.name]"
+            :select-current="item.selectCurrent"
+            :single="item.single"
+            :append-to-body="true"
+            :config="item.bindConfig"
+          />
+        </template>
+        <template v-else-if="item.outType == 'post'">
+          <cl-post-selector-input
+            v-model="updateData[item.name]"
+            :append-to-body="true"
+            :config="item.bindConfig"
+          />
+        </template>
+        <template v-else-if="item.outType == 'role'">
+          <cl-role-selector-input
+            v-model="updateData[item.name]"
+            :append-to-body="true"
+            :config="item.bindConfig"
+          />
+        </template>
+        <template v-else-if="item.outType == 'job'">
+          <cl-job-selector-input
+            v-model="updateData[item.name]"
+            :append-to-body="true"
+            :config="item.bindConfig"
+          />
+        </template>
+        <template v-else-if="item.outType == 'dem'">
+          <cl-dimension-selector-input
+            v-model="updateData[item.name]"
+            :append-to-body="true"
+            :config="item.bindConfig"
+          />
+        </template>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogFormVisible = false">取 消</el-button>
+      <el-button type="primary" @click="onConfirm">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+  import utils from '@/utils.js'
+  export default {
+    name: 'ClTemplateBatchUpdateDialog',
+    data() {
+      return {
+        dialogFormVisible: false,
+        listForm: [],
+        updateData: {},
+        title: '',
+        data: {},
+      }
+    },
+    mounted() {},
+    methods: {
+      onConfirm() {
+        const me_ = this
+        utils
+          .validateForm(this, 'custom-form')
+          .then(() => {
+            let confirmData = JSON.parse(JSON.stringify(me_.updateData))
+            Object.keys(me_.data).forEach((key) => {
+              if (!confirmData.hasOwnProperty(key)) {
+                confirmData[key] = me_.data[key]
+              }
+            })
+            me_.dialogFormVisible = false
+            me_.$emit('onConfirm', confirmData)
+          })
+          .catch(() => {
+            me_.$message.error(`还有内容未填写。`)
+          })
+      },
+      closeDialog() {
+        this.dialogFormVisible = false
+      },
+      showDialog(title, data) {
+        Object.assign(this.$data, this.$options.data())
+        this.dialogFormVisible = true
+        this.listForm = data
+        this.title = title
+      },
+    },
+  }
+</script>
+
+<style scoped></style>

package/packages/TemplateForm/index.js

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