2.0.0 • Published 4 years ago

flow-center-platform v2.0.0

Weekly downloads
-
License
MIT
Repository
gitlab
Last release
4 years ago

项目运行

  # 开发
  npm run start:dev
  # 测试
  npm run start:test
  # 预发布
  npm run start:pre
  # 正式
  npm run start:prod

项目打包

  # 开发
  npm run build:dev
  # 测试
  npm run build:dev
  # 预发布
  npm run build:dev
  # 正式
  npm run build:dev

项目记录

  • 人只能挂载到部门
  • 角色挂在到分部

项目基于vue-element-admin进行改造

关于停用启用树形数据的规则

后台取消的数据不存在停用的数据，只存在只用转台下的数据

分页

<el-pagination
  class="zl-pagination"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 30, 40]"
  :page-size="100"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total">
</el-pagination>

确定 取消

<el-button class="btn-theme" @click="save" > 确定 <el-button class="btn-default" @click="$router.go(-1)"> 取消

关于弹出框修改的例子组件

this.$prompt().then(({ value }) => {

}).catch(() => {

});

组织架构: FB-dialog

props: { 名称 title, 宽度 width, 是否展示 isShow, 表单内容 data, 验证规则 rules }

列表操作

<el-dropdown placement="bottom"> 
  <span class="el-dropdown-link color">
    <i class="el-icon-more-outline"></i>
  </span>
  <el-dropdown-menu slot="dropdown" class="p10">
    <el-button class="btn-theme-small fl" icon="el-icon-edit" @click="editFB(scope.row)">编辑</el-button>
    <el-button class="btn-default-small fl" icon="el-icon-warning">停用</el-button>
  </el-dropdown-menu>
</el-dropdown>

帮助

<el-input placeholder="请选择角色所属机构" class="zl-form-control zl-input-240px">
  <template slot="append">
    <i class="el-icon-more pointer"></i>
  </template>
</el-input>

列表复选框

被引用或者状态是停用，那么就不会在列表中显示复选框

/mnt/xvdb/www/authority

树形表格

type: 0 祖先 1 支持权限 2 不支持权限
{
  type: 0,
  'checked': false,
  'id': '1',
  'description': '用户管理',
  isIndeterminate: false,
  checkAll: false,
  act: '全选',
  children: []
}

弹框组件模板

<template>
  <div class="add-job-type-dialog">
    <el-dialog
      :title="title"
      :visible="isShow"
      v-if="isShow"
      :width="width"
      @close="close">
      <div class="container">
        <el-form class="zl-form" :model="info" :rules="rules">

        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn-default" @click="cancel">取 消</el-button>
        <el-button class="btn-theme" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'add-job-type-dialog',
  props: {
    title: {
      type: String,
      default: '新增类别'
    },
    data: {
      type: Object,
      default: () => {}
    },
    isShow: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '450px'
    }
  },
  data() {
    return {
      info: JSON.parse(JSON.stringify(this.data)),
      rules: {
        
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('update:isShow', false)
    },
    submit() {

    }
  }
}
</script>
<style lang="scss">
.add-job-type-dialog{

}
</style>

帮助框

<zl-help
  :isShow.sync="shows"
  :typeCheck="true"
  :positions="'post'"
  @submit-call="calls"
/>
属性类型默认值参数描述
isShow布尔falsetrue/false帮助框显示隐藏
typeCheck布尔falsetrue/false多选false/单选true
positionsstringpost 岗位， role 角色， user 用户
@submit-call自定义事件选择的数据

表单帮助框样式

<el-input disabled class="zl-form-control zl-input-240px" v-model="userInfo.superName">
  <template slot="append"><i class="el-icon-more pointer"></i></template>
</el-input>

删除停用提示框

const str = `
  <p style="text-align:center;">
    <i class="el-icon-warning" style="color:#299ee4;font-size:22px;vertical-align:middle;"></i>
    <span style="padding-left:10px;font-size:16px;vertical-align:middle;">此操作将永久删除, 是否继续?</span>
  </p>
`
dangerouslyUseHTMLString: true

列表操作

<span class="icon-theme" @click="editInfo(scope.row)">编辑</span>
<i class="zl-icon-line"></i>
<span class="icon-theme" @click="stopFunc(scope.row)">{{ scope.row.status === 1 ? '停用' : '启用'}}</span>

上传

  • :action="$store.state.vendor.photoUpload"

  • :headers="{ token: $store.state.user.token }"

<el-upload
  class="avatar-uploader"
  :action="$store.state.vendor.photoUpload"
  :show-file-list="false"
  :headers="{ token: $store.state.user.token }""
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
// 上传之前
beforeAvatarUpload(file) {
  const typeArr = ["image/png", "image/jpeg", "image/jpeg", "image/gif"]
  const isJPG = typeArr.indexOf(file.type) !== -1 ? true : false
  const isLt2M = file.size / 1024 <= 2048;
  if (!isJPG) {
    this.$message.warning("只能上传PNG,JPG,GIF格式的图片!")
  }
  if (!isLt2M) {
    this.$message.warning("图片大小不能超过2M!")
  }
  
  return isJPG && isLt2M
},

// 上传成功
handleAvatarSuccess(response, file, fileList) {
  if (response.success) {
    this.$message.success('头像上传成功')
    this.imageUrl = response.data
  }
}

帮助框

    <!-- 
      isShow - 打开关闭 

      clean - 打开是否重置

      typeCheck 右侧结果可多选 - true  右侧结果可单选 - false

      positions 角色 - role 用户 - user 岗位 - post

      submit-call 确定回调选择结果 argument - 2

      whereShows tab具体需要哪几个 ：

        组织架构 - 1
        按角色 - 2
        按岗位 - 3
        当前所属部门 - 4
        按角色类别 - 5
        按岗位类别 - 6
                
      choice 选择方式 多选 - checkbox 单选 - radio
      -->
    <zl-user-help
      :isShow.sync="users"
      :clean="true"
      :typeCheck="false"
      :positions="'role'"
      @submit-call="callUser"
      :whereShows="[1,2]"
      :choice="'checkbox'"
    />

不让删除

:selectable="checkSelection"

checkSelection(row, index) {
  return row.referenced ? false : true
}

删除操作判断

if (res.errcode === 4014) {
  this.$message.error(res.errmsg)
} else {
  this.$message.error("删除失败，请联系管理员。");
}

表格固定表头

// computed

tableHeight() {
  return this.$store.state.app.$th
}

// watch

tableData(data) {
  this.$store.dispatch('action_set_table_height', data.length)
}

表格内容超出省略号显示

  • :show-overflow-tooltip="true"

限制规则

import { validateInterAndZero } from '@/utils/validate'

const validateSeq = (rule, value, callback) => {
  if (value === '' || value === null || value === undefined) {
    callback()
  } else {
    if (!validateInterAndZero(value)) {
      callback(new Error('只能输入0以及正整数'))
    } else {
      if (value < 0 || value > 100000) {
        callback(new Error('只能输入0-100000'))
      } else {
        callback()
      }
    }
  }
}

const validateSeq2 = (rule, value, callback) => {
  if (value === '' || value === null || value === undefined) {
    callback()
  } else {
    if (!validateInterAndZero(value)) {
      callback(new Error('只能输入0以及正整数'))
    } else {
      if (value < 0 || value > 999) {
        callback(new Error('只能输入0-999'))
      } else {
        callback()
      }
    }
  }
}


staffLimit: [
  { validator: validateSeq, trigger: 'blur' }
],
seq: [
  { validator: validateSeq2, trigger: 'blur' }
]
vueelement-uiadminmanagement-systemflow
@mamcharger/mam-printapp-container-mamaxiosbabel-polyfillbabel-preset-es2015c-mam-component-loaderclipboardcodemirrorconnectdriver.jsdropzonedsp-pluginechartselement-uifile-saverform-render-mamjs-cookiejsonlintmam-plugin-form-web-niumam-plugin-renderermam-ssomockjsmsg-bellnode-uuidnormalize.cssnprogressoffice-previewscreenfullshowdownsortablejstui-editorvuevue-avatarvue-busvue-count-tovue-i18nvue-infinite-scrollvue-routervue-splitpanevue-table-with-tree-gridvue-tree-chartvuedraggablevuexweb-niu-flowinfoweb-niu-ysj-uiwebpackwebpack-clixlsx
2.0.0

4 years ago