模块类型修改

src/views/modules/custom/module-style-list.vue

@@ -0,0 +1,209 @@
+<template>
+  <el-dialog
+    append-to-body
+    :visible.sync="visible"
+    title="模块样式"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+  >
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="setModuleStyle()" label-width="120px">
+      <el-form-item label="模块样式：" prop="moduleStyle">
+        <el-radio-group v-model="dataForm.moduleStyle">
+          <el-radio v-for="item in moduleStyleList"
+                    :key="item.dictValue"
+                    :label="item.dictValue" style="margin-left: 30px;margin-top: 30px" @change="setModuleStyle(item.dictName,item.dictValue)">
+            {{ `${item.dictName}` }}
+            <div>
+              <el-image
+                    style="width: 100px;height: 100px;"
+                    :key="item.remark"
+                    :src="item.remark"
+                    :preview-src-list="previewImgList"
+                    @click="clickImg(item.remark)">
+              </el-image>
+            </div>
+          </el-radio>
+        </el-radio-group>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import 'element-ui/lib/theme-chalk/image.css'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      visible: false,
+      dataForm: {
+        moduleStyle: ''
+      },
+      moduleStyleList: [],
+      previewImgList: []
+    }
+  },
+  computed: {
+    dataRule () {
+      return {
+        moduleStyle: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  created () {
+    this.getModuleStyleList()
+  },
+  methods: {
+    clickImg (url) {
+      this.previewImgList = []
+      this.previewImgList.push(url)
+    },
+    getModuleStyleList () {
+      this.$http.get(`/custom/module/listSimple/jinshui_gui_style`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.moduleStyleList = res.data
+      }).catch(() => {})
+    },
+    setModuleStyle (name, value) {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        let data = {
+          moduleStyle: value,
+          moduleStyleName: name
+        }
+        this.$emit('setModuleStyle', data)
+        this.visible = false
+      })
+    },
+    init () {
+      this.visible = true
+      this.$nextTick(() => {
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .project-handle {
+    .el-timeline {
+      padding-left: 9px;
+      font-size: 13px;
+    }
+  }
+  .el-form-item__label {
+    font-weight: bold;
+  }
+</style>
+
+<style lang="scss" scoped>
+  .project-handle {
+    width: 100%;
+    height: calc(100vh - 120px);
+    background: #ffffff;
+    box-sizing: border-box;
+    padding: 10px;
+    .project-detail {
+      width: 79%;
+      height: 80%;
+      border: 2px solid #ccc;
+      box-sizing: border-box;
+      padding: 10px;
+      padding-top: 20px;
+      float:left;
+      margin-bottom: 1%;
+      position:relative;
+      .project-detail-tip {
+        position: absolute;
+        top: 0;
+        left:0;
+        width: 80px;
+        height: 30px;
+        line-height: 30px;
+        color: #ffffff;
+        background: #4ac38b;
+        text-align:center;
+      }
+      .el-form {
+        width: 58%;
+        height: 100%;
+        float:left;
+        overflow-y:auto;
+        &::-webkit-scrollbar {
+          width: 5px;
+          height: 1px;
+        }
+        &::-webkit-scrollbar-thumb {
+          border-radius: 5px;
+          background: #fff;
+        }
+        &::-webkit-scrollbar-track {
+          border-radius: 10px;
+          background: #fff;
+        }
+      }
+      .container {
+        width: 40%;
+        height: 100%;
+        float: right;
+        .location {
+          height: 30px;
+          line-height: 30px;
+        }
+        #map {
+          width: 100%;
+          height: calc(100% - 30px);
+        }
+      }
+    }
+    .project-progress {
+      width: 20%;
+      height: 80%;
+      float: right;
+      border: 2px solid #ccc;
+      box-sizing: border-box;
+      margin-left: 1%;
+      padding-top: 20px;
+      overflow-y:auto;
+      position: relative;
+      padding-top: 40px;
+      .project-progress-tip {
+        position: absolute;
+        top: 0;
+        left:0;
+        width: 80px;
+        height: 30px;
+        line-height: 30px;
+        color: #ffffff;
+        background: #0098ff;
+        text-align:center;
+      }
+      &::-webkit-scrollbar {
+        width: 5px;
+        height: 1px;
+      }
+      &::-webkit-scrollbar-thumb {
+        border-radius: 5px;
+        background: #aaa;
+      }
+      &::-webkit-scrollbar-track {
+        border-radius: 10px;
+        background: #ccc;
+      }
+    }
+    .handle-operation {
+      width: 79%;
+      height: 49%;
+      box-sizing: border-box;
+      border: 2px solid #ccc;
+      float:left;
+    }
+  }
+</style>

src/views/modules/custom/modulecategory-add-or-update.vue

@@ -0,0 +1,318 @@
+<template>
+  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" label-width="120px">
+      <el-form-item prop="categoryName" label="模块类别名称">
+        <el-input v-model="dataForm.categoryName" placeholder="模块类别名称"></el-input>
+      </el-form-item>
+      <el-form-item prop="categoryCode" label="模块类别编码">
+        <el-input v-model="dataForm.categoryCode" placeholder="模块类别编码"></el-input>
+      </el-form-item>
+      <el-form-item label="模块样式" prop="moduleStyle">
+        <el-input v-model="dataForm.moduleStyle"  v-show="false"></el-input>
+        <el-button type="primary" @click="openModuleStyleSelect">点击选择模块样式</el-button>
+        {{moduleStyleName}}
+      </el-form-item>
+      <el-form-item prop="parentName" label="上级分类" class="category-list">
+        <el-popover v-model="categoryListVisible" ref="categoryListPopover" placement="bottom-start" trigger="click">
+          <el-tree :data="categoryList"
+                   :props="{ label: 'categoryName', children: 'children' }"
+                   node-key="id"
+                   ref="categoryListTree"
+                   :highlight-current="true"
+                   :expand-on-click-node="false"
+                   accordion
+                   @current-change="categoryListTreeCurrentChangeHandle">
+          </el-tree>
+        </el-popover>
+        <el-input v-model="dataForm.parentName" v-popover:categoryListPopover :readonly="true" placeholder="上级分类">
+          <i v-if="dataForm.pid !== '0'" slot="suffix" @click.stop="categoryListTreeSetDefaultHandle()" class="el-icon-circle-close el-input__icon"></i>
+        </el-input>
+      </el-form-item>
+      <el-form-item label="模块类别图片"
+                    v-loading="loading" prop="imgUrl">
+        <el-upload class="avatar-uploader"
+                   :action="uploadUrl"
+                   :show-file-list="false"
+                   :on-success="handleAvatarActSuccess"
+                   :on-error="handelError"
+                   :before-upload="beforeAvatarUpload">
+          <img v-if="dataForm.imgUrl"
+               :src="dataForm.imgUrl"
+               class="avatar">
+          <i v-else
+             class="el-icon-plus avatar-uploader-icon"></i>
+          <div slot="tip"
+               class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="dataForm.sort" :min="0" :max="9999"></el-input-number>
+      </el-form-item>
+      <el-form-item label="启用标识" prop="enableFlag">
+        <el-select v-model="dataForm.enableFlag" placeholder="请选择是否启用">
+          <el-option
+              v-for="item in isEnableFlag"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="是否有banner" prop="bannerFlag">
+        <el-select v-model="dataForm.bannerFlag" placeholder="请选择是否启用">
+          <el-option
+              v-for="item in isEnableFlag"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="dataForm.remark" placeholder="备注" maxlength="200" show-word-limit></el-input>
+      </el-form-item>
+    </el-form>
+    <template slot="footer">
+      <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
+      <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
+    </template>
+    <module-style-list v-if="moduleStyleListVisible"
+                              ref="moduleStyleList" @setModuleStyle="setModuleStyle"></module-style-list>
+  </el-dialog>
+</template>
+
+<script>
+import Cookies from 'js-cookie'
+import debounce from 'lodash/debounce'
+import moduleStyleList from './module-style-list'
+export default {
+  data () {
+    return {
+      visible: false,
+      categoryList: [],
+      categoryListVisible: false,
+      dataForm: {
+        id: '',
+        categoryName: '',
+        pid: '',
+        parentName: '',
+        sort: 0,
+        categoryType: '',
+        categoryCode: '',
+        remark: '',
+        enableFlag: '',
+        imgUrl: '',
+        moduleStyle: '',
+        bannerFlag: ''
+      },
+      secondOrgDictList: [],
+      // 图片
+      loading: false,
+      uploadUrl: '',
+      isEnableFlag: [{
+        value: '0',
+        label: '否'
+      }, {
+        value: '1',
+        label: '是'
+      }],
+      moduleStyleName: '',
+      moduleStyleListVisible: false,
+      moduleStyleList: []
+    }
+  },
+  components: {
+    moduleStyleList
+  },
+  created () {
+    this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
+    this.dataForm.imgUrl = ''
+    this.getModuleStyleList()
+  },
+  computed: {
+    dataRule () {
+      return {
+        categoryName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        parentName: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        categoryCode: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        sort: [
+          { required: true, message: this.$t('validate.required'), trigger: 'change' }
+        ],
+        imgUrl: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        enableFlag: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        moduleStyle: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ],
+        bannerFlag: [
+          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    init () {
+      this.visible = true
+      this.dataForm.imgUrl = ''
+      this.$nextTick(() => {
+        this.$refs['dataForm'].resetFields()
+        this.getcategoryList().then(() => {
+          this.categoryListTreeSetDefaultHandle()
+          if (this.dataForm.id) {
+            this.getInfo()
+          }
+          if (this.dataForm.id) {
+          } else {
+            this.dataForm.categoryCode = ''
+            this.dataForm.categoryType = ''
+            this.moduleStyleName = ''
+          }
+        })
+      })
+      this.getSecondOrgDicList()
+    },
+    getModuleStyleList () {
+      this.$http.get(`/custom/module/listSimple/jinshui_gui_style`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.moduleStyleList = res.data
+      }).catch(() => {})
+    },
+    setModuleStyle (data) {
+      this.dataForm.moduleStyle = data.moduleStyle
+      this.moduleStyleName = data.moduleStyleName
+    },
+    openModuleStyleSelect () {
+      this.moduleStyleListVisible = true
+      this.$nextTick(() => {
+        this.$refs.moduleStyleList.dataForm.moduleStyle = this.dataForm.moduleStyle
+        this.$refs.moduleStyleList.init()
+      })
+    },
+    handleAvatarActSuccess (res, file) {
+      this.loading = false
+      this.dataForm.imgUrl = res.data.url
+    },
+    beforeAvatarUpload (file) {
+      this.loading = true
+    },
+    handelError () {
+      this.loading = false
+    },
+    changeOrgType (item) {
+      this.dataForm.categoryType = item
+    },
+    getcategoryList () {
+      return this.$http.get('/custom/modulecategory/list').then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.categoryList = res.data
+      }).catch(() => { })
+    },
+    getSecondOrgDicList () {
+      this.$http.get(`/sys/dict/listSimple/category_type`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.secondOrgDictList = res.data
+      }).catch(() => { })
+    },
+    getInfo () {
+      this.$http.get(`/custom/modulecategory/${this.dataForm.id}`).then(({ data: res }) => {
+        if (res.code !== 0) {
+          return this.$message.error(res.msg)
+        }
+        this.dataForm = {
+          ...this.dataForm,
+          ...res.data
+        }
+        if (res.data.moduleStyle) {
+          let dict = this.moduleStyleList.filter(item => item.dictValue === res.data.moduleStyle)[0].dictName
+          if (dict) {
+            this.moduleStyleName = dict
+          }
+        }
+        if (this.dataForm.pid === '0') {
+          return this.categoryListTreeSetDefaultHandle()
+        }
+        this.$refs.categoryListTree.setCurrentKey(this.dataForm.pid)
+      }).catch(() => { })
+    },
+    categoryListTreeSetDefaultHandle () {
+      this.dataForm.pid = '0'
+      this.dataForm.parentName = '一级分类'
+    },
+    categoryListTreeCurrentChangeHandle (data) {
+      this.dataForm.pid = data.id
+      this.dataForm.parentName = data.categoryName
+      this.categoryListVisible = false
+    },
+    // 表单提交
+    dataFormSubmitHandle: debounce(function () {
+      this.$refs['dataForm'].validate((valid) => {
+        if (!valid) {
+          return false
+        }
+        this.$http[!this.dataForm.id ? 'post' : 'put']('/custom/modulecategory', this.dataForm).then(({ data: res }) => {
+          if (res.code !== 0) {
+            return this.$message.error(res.msg)
+          }
+          this.$message({
+            message: this.$t('prompt.success'),
+            type: 'success',
+            duration: 500,
+            onClose: () => {
+              this.visible = false
+              this.$emit('refreshDataList')
+            }
+          })
+        }).catch(() => { })
+      })
+    }, 1000, { 'leading': true, 'trailing': false })
+  }
+}
+</script>
+<style lang="scss">
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+}
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 178px;
+  height: 178px;
+  line-height: 178px;
+  text-align: center;
+}
+.avatar {
+  width: 178px;
+  height: 178px;
+  display: block;
+}
+.mod-sys__category {
+  .category-list {
+    .el-input__inner,
+    .el-input__suffix {
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/views/modules/custom/modulecategory.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-card shadow="never" class="aui-card--fill">
+    <div class="mod-sys__dept">
+      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
+        <el-form-item>
+          <el-button type="primary" @click="addOrUpdateHandle()">{{ $t('add') }}</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
+        <table-tree-column prop="categoryName" label="模块类别名称" header-align="center"></table-tree-column>
+        <el-table-column prop="parentName" label="上级模块类别名称" header-align="center" align="center"></el-table-column>
+        <el-table-column align="center" label="模块图片" :show-overflow-tooltip="true" prop="imgUrl">
+          <template slot-scope="scope">
+            <el-popover placement="right"
+                        title=""
+                        trigger="click"
+                        class="big_image">
+              <el-image slot="reference"
+                        style="width: 100px;height: 100px"
+                        :src="scope.row.imgUrl"
+                        :alt="scope.row.imgUrl"></el-image>
+              <img class="big_image"
+                   :src="scope.row.imgUrl" />
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column prop="enableFlag" label="启用标识" :formatter="showFlagFormatter" header-align="center" align="center" width="80"></el-table-column>
+        <el-table-column prop="sort" label="排序" header-align="center" align="center" width="60"></el-table-column>
+        <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
+        <el-table-column prop="sort" :label="$t('dept.sort')" header-align="center" align="center" width="80"></el-table-column>
+        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center" width="150">
+          <template slot-scope="scope">
+            <el-button  type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button>
+            <el-button  type="text" size="small" @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 弹窗, 新增 / 修改 -->
+      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
+    </div>
+  </el-card>
+</template>
+
+<script>
+import mixinViewModule from '@/mixins/view-module'
+import TableTreeColumn from '@/components/table-tree-column'
+import AddOrUpdate from './modulecategory-add-or-update'
+export default {
+  mixins: [mixinViewModule],
+  data () {
+    return {
+      mixinViewModuleOptions: {
+        getDataListURL: '/custom/modulecategory/list',
+        deleteURL: '/custom/modulecategory'
+      },
+      upLoadUrl: ''
+    }
+  },
+  components: {
+    TableTreeColumn,
+    AddOrUpdate
+  },
+  methods: {
+    showFlagFormatter: function (row, column) {
+      if (row.enableFlag === '0') {
+        return '否'
+      }
+      return '是'
+    }
+  }
+}
+</script>
+<style scoped>
+  .big_image {
+    width: 300px;
+    height: 240px;
+  }
+</style>