添加规则模板页

long

2021-06-07 23bfd7ceb7a3d15a0228789542845cd132cacc64

添加规则模板页

 src/components_simple/UploadMultipleImg.vue

New file
@@ -0,0 +1,156 @@
<template>
  <div>
    <!-- 上传图片组件(多图) -->
    <el-upload
      ref="refUploadImg"
      :accept="accept"
      :auto-upload="false"
      list-type="picture-card"
      :class="{disabled:uploadDisabled}"
      action="#"
      :limit="limit"
      :file-list="uploadImgs"
      :on-change="addUploadImg"
      :on-remove="delUploadImg"
      :http-request="uploadImg"
      :on-preview="uploadPreview"
      :before-upload="beforeUploadImg"
      size="mini"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- upload放大图片 -->
    <el-dialog :visible.sync="uploadPreviewVisible" append-to-body style="text-align:center">
      <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import mixin_upload from '@/mixins/upload.js' // 通用上传图片预览
export default {
  mixins: [mixin_upload],
  model: {
    prop: 'uploadImgs',
    event: 'change'
  },
  props: {
    uploadImgs: {
      type: Array,
      default: () => {
        return []
      }
    },
    accept: {
      type: String,
      default: () => {
        return 'image/jpeg,image/jpg,image/gif,image/png'
      }
    },
    limit: {
      type: Number,
      default: 9
    }
  },

  data() {
    return {
      callback: null
    }
  },
  computed: {
    uploadDisabled() {
      return this.uploadImgs.length >= this.limit
    }
  },

  methods: {
    // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
    // 上传前确认格式
    beforeUploadImg(file) {
      const isImg = file.type.indexOf('image/') > -1
      const isTooLarge = file.size / 1024 / 1024 > 4
      let flag = true
      if (!isImg) {
        this.$message.error('必须是选择图片文件')
        flag = false
      } else if (isTooLarge) {
        this.$message.error('请勿上传大于4MB的图片')
        flag = false
      }
      return flag
    },
    // 增加图片
    addUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },
    // 删除图片
    delUploadImg(file, fileList) {
      this.$emit('change', fileList)
    },
    // 执行上传商品图
    runUploadImg(suc_cb) {
      console.log('runUploadImg!!!!!')
      if (this.checkNeedUpload(this.uploadImgs)) {
        this.callback = suc_cb
        this.$refs.refUploadImg.submit()
      } else {
        suc_cb && suc_cb()
      }
    },
    // 上传商品图
    uploadImg(res) {
      console.log(res)
      const file = res.file
      const formData = new FormData()
      formData.append('file', file)
      console.log(formData)
      this.postFN({
        url: 'admin/image/upload?folderCode=IMG',
        header: { 'Content-Type': 'multipart/form-data' },
        params: formData,
        mockData: {
          code: 100,
          msg: '',
          data: {
            imgUrl: 'xxxx'
          }
        }
      }, (inf) => {
        console.log('上传图片成功')

        // 根据uid 替换掉未上传的图片
        var uploadImgs = this.uploadImgs
        uploadImgs.forEach((o, i) => {
          if (o.uid === res.file.uid) uploadImgs[i] = { url: inf.imgUrl, status: 'success' }
        })
        this.uploadImgs = JSON.parse(JSON.stringify(uploadImgs))

        // 触发change时间激活v-model
        this.$emit('change', uploadImgs)

        console.log('上传图片结束')

        // 上传结束
        if (!this.checkNeedUpload(this.uploadImgs)) {
          console.log('上传轮播图结束')
          this.callback && this.callback(this.uploadImgs)
        }
      })
    }
    // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
  }
}
</script>

<style>
.disabled .el-upload--picture-card {
    display: none;
}
.el-upload-list--picture-card{
  line-height: 1;
}
.el-upload-list--picture-card .el-upload-list__item{
  margin-bottom: 0
}
</style>

 src/pages/demo/index.vue

@@ -1,5 +1,8 @@
<template>
  <div class="app-container">
    <!-- 返回按钮和标题 -->
    <!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->

    <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-form v-show="showSearch" ref="searchForm" :inline="true">
      <el-form-item label="角色名称">
@@ -23,6 +26,7 @@
    <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- 权限判断 v-if="getAuthValueFN('xxx_add')" -->
        <el-button
          type="primary"
          icon="el-icon-plus"
@@ -39,6 +43,7 @@
      <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
      <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
        <template slot-scope="scope">
          <!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
          <el-switch
            v-model="scope.row.isUp"
            :active-value="1"
@@ -50,12 +55,14 @@
      <el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
          >编辑</el-button>
          <!-- 权限判断 v-if="getAuthValueFN('xxx_del')" -->
          <el-button
            size="mini"
            type="text warn"
@@ -67,7 +74,7 @@
    </el-table>

    <!-- 新增&编辑 -->
    <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'新增医院科室':'编辑医院科室'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
    <el-dialog v-el-drag-dialog :title="(dialogData.type=='add'?'新增':'编辑') + objectName" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
      <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
        <el-form-item label="名称" prop="name">
          <el-input v-model="dialogData.name" placeholder="请输入名称" maxlength="50" />
@@ -106,13 +113,20 @@
  data() {
    return {
      showSearch: true, // 是否显示搜索区
      keyWord: '',
      keyWord: '', // 搜索区字段，可自行扩展其余字段

      // TODO
      objectName: 'xx', // 对象名称，用于删除提示、启用提示、弹窗标题等

      // 数据列表
      list: [],

      // 弹窗数据
      dialogVisible: false,
      dialogData: {},

      // 富文本编辑器
      // rangenum: null,

      // 分页 ↓↓↓↓↓↓↓↓↓↓
      total: 0,
@@ -120,6 +134,7 @@
      pageSize: 20,
      // 分页 ↑↑↑↑↑↑↑↑↑↑

      // TODO
      // 表单校验
      rules: {
        name: [
@@ -140,6 +155,21 @@
      this.getList()
    },

    // ========== 富文本相关
    // 富文本编辑器的内容赋值
    // catchData(content) {
    //   if (content === '<p><br></p>') content = ''
    //   try {
    //     const currentRange = window.getSelection().getRangeAt(0)
    //     this.rangenum = currentRange
    //   } catch (e) {
    //
    //   }
    //   this.$set(this.dialogData, 'content', content)
    //   this.$refs[this.formName].validateField('content')
    // },
    // ========== 富文本相关

    // 获取列表
    getList() {
      var { pageNum, pageSize, keyWord } = this
@@ -148,6 +178,8 @@
        params: {
          pageNum: pageNum,
          pageSize: pageSize,

          // TODO
          keyWord: keyWord
        },
        mockData: {
@@ -181,12 +213,13 @@
    // 删除
    handleDelete(item) {
      // 打开二次确认弹窗
      this.$confirm('是否确认删除该角色?', '提示', {
      this.$confirm('是否确认删除该' + this.objectName + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 确定回调
        // TODO url
        this.postFN({
          url: 'xxx',
          params: {
@@ -203,14 +236,15 @@
        })
      }).catch(() => {})
    },
    // 修改是否上架 todo
    // 修改是否上架
    handleUpChange(item) {
      const text = item.isUp === 1 ? '上架' : '下架'
      this.$confirm('确认要' + text + '该角色吗?', '提示', {
      this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // TODO url
        this.postFN({
          url: 'xxx',
          params: {
@@ -237,6 +271,7 @@
      var dialogData = {
        type: 'add',
        isUp: 1
        // TODO 部分组件需要预设字段，提供给v-model，例如 el-select el-timepicker el-datepicker 上传组件 富文本等
      }
      this.dialogVisible = true
      this.$nextTick(() => {
@@ -261,6 +296,8 @@
    hideDialog() {
      this.dialogData = {}
      this.dialogVisible = false
      // 清空富文本
      // this.rangenum = null
    },
    // 提交新增&编辑
    submitHandle() {
@@ -276,12 +313,14 @@
      var params = {
        name: dialogData.name,
        isUp: dialogData.isUp
        // TODO 参数
      }

      if (dialogData.password) params.password = dialogData.password

      var isAdd = dialogData.type === 'add'
      var url = isAdd ? 'admin/hospital/department/add' : 'admin/hospital/department/edit'
      // TODO url
      var url = isAdd ? 'xxx/add' : 'xxx/edit'

      !isAdd && (params.id = dialogData.id)


 src/pages/demo/list.vue

@@ -1,5 +1,8 @@
<template>
  <div class="app-container">
    <!-- 返回按钮和标题 -->
    <!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->

    <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-form v-show="showSearch" ref="searchForm" :inline="true">
      <el-form-item label="角色名称">
@@ -22,6 +25,7 @@

    <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
    <el-row :gutter="10" class="mb8">
      <!-- 权限判断 v-if="getAuthValueFN('xxx_add')" -->
      <el-col :span="1.5">
        <el-button
          type="primary"
@@ -48,6 +52,7 @@
      <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
      <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
        <template slot-scope="scope">
          <!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
          <el-switch
            v-model="scope.row.isUp"
            :active-value="1"
@@ -59,12 +64,14 @@
      <el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120" fixed="right">
        <template slot-scope="scope">
          <!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showEditDialog(scope.row)"
          >编辑</el-button>
          <!-- 权限判断 v-if="getAuthValueFN('xxx_del')" -->
          <el-button
            size="mini"
            type="text warn"
@@ -76,7 +83,7 @@
    </el-table>

    <!-- 新增&编辑 -->
    <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'新增医院科室':'编辑医院科室'" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
    <el-dialog v-el-drag-dialog :title="(dialogData.type=='add'?'新增':'编辑') + objectName" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
      <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
        <el-form-item label="名称" prop="name">
          <el-input v-model="dialogData.name" placeholder="请输入名称" maxlength="50" />
@@ -112,13 +119,20 @@
  data() {
    return {
      showSearch: true, // 是否显示搜索区
      keyWord: '',
      keyWord: '', // 搜索区字段，可自行扩展其余字段

      // TODO
      objectName: 'xx', // 对象名称，用于删除提示、启用提示、弹窗标题等

      // 数据列表
      list: [],

      // 弹窗数据
      dialogVisible: false,
      dialogData: {},

      // 富文本编辑器
      // rangenum: null,

      // 分页 ↓↓↓↓↓↓↓↓↓↓
      total: 0,
@@ -146,10 +160,26 @@
      this.getList()
    },

    // ========== 富文本相关
    // 富文本编辑器的内容赋值
    // catchData(content) {
    //   if (content === '<p><br></p>') content = ''
    //   try {
    //     const currentRange = window.getSelection().getRangeAt(0)
    //     this.rangenum = currentRange
    //   } catch (e) {
    //
    //   }
    //   this.$set(this.dialogData, 'content', content)
    //   this.$refs[this.formName].validateField('content')
    // },
    // ========== 富文本相关

    // 获取列表
    getList() {
      var { pageNum, pageSize, keyWord } = this
      this.postFN({
        // TODO url
        url: 'xxx',
        params: {
          pageNum: pageNum,
@@ -170,6 +200,7 @@
          }
        }
      }, (inf) => {
        // 测试用
        for (var i = 0; i < 19; i++) {
          inf.list.push({
            id: 'xxx',
@@ -201,6 +232,7 @@
        type: 'warning'
      }).then(() => {
        // 确定回调
        // TODO url
        this.postFN({
          url: 'xxx',
          params: {
@@ -227,6 +259,7 @@
      }).then(() => {
        this.postFN({
          url: 'xxx',
          // TODO url
          params: {
            id: item.id
          },
@@ -275,6 +308,8 @@
    hideDialog() {
      this.dialogData = {}
      this.dialogVisible = false
      // 清空富文本
      // this.rangenum = null
    },
    // 提交新增&编辑
    submitHandle() {
@@ -295,7 +330,8 @@
      if (dialogData.password) params.password = dialogData.password

      var isAdd = dialogData.type === 'add'
      var url = isAdd ? 'admin/hospital/department/add' : 'admin/hospital/department/edit'
      // TODO url
      var url = isAdd ? 'xxx/add' : 'xxx/edit'

      !isAdd && (params.id = dialogData.id)


 src/styles/ry.scss

@@ -105,7 +105,7 @@
    position: absolute;
}

.el-table .fixed-width .el-button--mini {
.el-table .fixed-width .el-button--text {
    color: #409EFF;
    padding-left: 0;
    padding-right: 0;
@@ -237,4 +237,4 @@
.top-right-btn {
    position: relative;
    float: right;
}
}