2 changed files with 324 additions and 0 deletions
			
			
		@ -0,0 +1,195 @@ | 
				
			|||||
 | 
					<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="$i18n.locale === 'en-US' ? '120px' : '80px'"> | 
				
			||||
 | 
					      <el-form-item label="是否渐变" | 
				
			||||
 | 
					                    prop="gradationFlag"> | 
				
			||||
 | 
					        <el-select v-model="dataForm.gradationFlag" | 
				
			||||
 | 
					                   clearable | 
				
			||||
 | 
					                   placeholder="请选择"> | 
				
			||||
 | 
					          <el-option v-for="(item,index) in gradationFlagOptions" | 
				
			||||
 | 
					                     :key="index" | 
				
			||||
 | 
					                     :label="item.name" | 
				
			||||
 | 
					                     :value="item.id"></el-option> | 
				
			||||
 | 
					        </el-select> | 
				
			||||
 | 
					      </el-form-item> | 
				
			||||
 | 
					      <el-form-item label="背景颜色" | 
				
			||||
 | 
					                    prop="backgroundColor" | 
				
			||||
 | 
					                    v-if="!categoryVisible"> | 
				
			||||
 | 
					        <el-input v-model="dataForm.backgroundColor" | 
				
			||||
 | 
					                  placeholder="背景颜色(渐变色为0时使用)"></el-input> | 
				
			||||
 | 
					      </el-form-item> | 
				
			||||
 | 
					      <el-form-item label="开始色" | 
				
			||||
 | 
					                    prop="startColor" | 
				
			||||
 | 
					                    v-if="categoryVisible"> | 
				
			||||
 | 
					        <el-input v-model="dataForm.startColor" | 
				
			||||
 | 
					                  placeholder="开始色(渐变色为1时使用)"></el-input> | 
				
			||||
 | 
					      </el-form-item> | 
				
			||||
 | 
					      <el-form-item label="终止色" | 
				
			||||
 | 
					                    prop="endColor" | 
				
			||||
 | 
					                    v-if="categoryVisible"> | 
				
			||||
 | 
					        <el-input v-model="dataForm.endColor" | 
				
			||||
 | 
					                  placeholder="终止色(渐变色为1时使用)"></el-input> | 
				
			||||
 | 
					      </el-form-item> | 
				
			||||
 | 
					      <el-form-item label="标签颜色" | 
				
			||||
 | 
					                    prop="lableColor"> | 
				
			||||
 | 
					        <el-input v-model="dataForm.lableColor" | 
				
			||||
 | 
					                  placeholder="标签颜色"></el-input> | 
				
			||||
 | 
					      </el-form-item> | 
				
			||||
 | 
					      <el-form-item label="菜单图标" | 
				
			||||
 | 
					                    prop="icon"> | 
				
			||||
 | 
					        <el-input v-model="dataForm.icon" | 
				
			||||
 | 
					                  placeholder="菜单图标"></el-input> | 
				
			||||
 | 
					      </el-form-item> | 
				
			||||
 | 
					      <el-form-item label="模板编码" | 
				
			||||
 | 
					                    prop="templateCode"> | 
				
			||||
 | 
					        <el-input v-model="dataForm.templateCode" | 
				
			||||
 | 
					                  placeholder="模板编码(tem-1,tem-2,tem-3)"></el-input> | 
				
			||||
 | 
					      </el-form-item> | 
				
			||||
 | 
					      <el-form-item label="模板名称" | 
				
			||||
 | 
					                    prop="templateName"> | 
				
			||||
 | 
					        <el-input v-model="dataForm.templateName" | 
				
			||||
 | 
					                  placeholder="模板名称"></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> | 
				
			||||
 | 
					  </el-dialog> | 
				
			||||
 | 
					</template> | 
				
			||||
 | 
					
 | 
				
			||||
 | 
					<script> | 
				
			||||
 | 
					import debounce from 'lodash/debounce' | 
				
			||||
 | 
					export default { | 
				
			||||
 | 
					  data () { | 
				
			||||
 | 
					    return { | 
				
			||||
 | 
					      visible: false, | 
				
			||||
 | 
					      dataForm: { | 
				
			||||
 | 
					        id: '', | 
				
			||||
 | 
					        gradationFlag: '', | 
				
			||||
 | 
					        backgroundColor: '', | 
				
			||||
 | 
					        startColor: '', | 
				
			||||
 | 
					        endColor: '', | 
				
			||||
 | 
					        lableColor: '', | 
				
			||||
 | 
					        icon: '', | 
				
			||||
 | 
					        templateCode: '', | 
				
			||||
 | 
					        templateName: '', | 
				
			||||
 | 
					        revision: '', | 
				
			||||
 | 
					        createdBy: '', | 
				
			||||
 | 
					        createdTime: '', | 
				
			||||
 | 
					        updatedBy: '', | 
				
			||||
 | 
					        updatedTime: '' | 
				
			||||
 | 
					      }, | 
				
			||||
 | 
					      gradationFlagOptions: [{ id: '1', name: '是' }, { id: '0', name: '否' }], | 
				
			||||
 | 
					      categoryVisible: true | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  computed: { | 
				
			||||
 | 
					    dataRule () { | 
				
			||||
 | 
					      return { | 
				
			||||
 | 
					        gradationFlag: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        backgroundColor: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        startColor: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        endColor: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        lableColor: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        icon: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        templateCode: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        templateName: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        revision: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        createdBy: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        createdTime: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        updatedBy: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ], | 
				
			||||
 | 
					        updatedTime: [ | 
				
			||||
 | 
					          { required: true, message: this.$t('validate.required'), trigger: 'blur' } | 
				
			||||
 | 
					        ] | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  watch: { | 
				
			||||
 | 
					    'dataForm.gradationFlag': function (val) { | 
				
			||||
 | 
					      if (val === '0') { | 
				
			||||
 | 
					        this.categoryVisible = false | 
				
			||||
 | 
					      } else { | 
				
			||||
 | 
					        this.categoryVisible = true | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  methods: { | 
				
			||||
 | 
					    init () { | 
				
			||||
 | 
					      this.visible = true | 
				
			||||
 | 
					      this.$nextTick(() => { | 
				
			||||
 | 
					        this.$refs['dataForm'].resetFields() | 
				
			||||
 | 
					        if (this.dataForm.id) { | 
				
			||||
 | 
					          this.getInfo() | 
				
			||||
 | 
					        } | 
				
			||||
 | 
					      }) | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    // 获取信息 | 
				
			||||
 | 
					    getInfo () { | 
				
			||||
 | 
					      this.$http.get(`/sys/appmenutemplate/${this.dataForm.id}`).then(({ data: res }) => { | 
				
			||||
 | 
					        if (res.code !== 0) { | 
				
			||||
 | 
					          return this.$message.error(res.msg) | 
				
			||||
 | 
					        } | 
				
			||||
 | 
					        this.dataForm = { | 
				
			||||
 | 
					          ...this.dataForm, | 
				
			||||
 | 
					          ...res.data | 
				
			||||
 | 
					        } | 
				
			||||
 | 
					      }).catch(() => { }) | 
				
			||||
 | 
					    }, | 
				
			||||
 | 
					    // 表单提交 | 
				
			||||
 | 
					    dataFormSubmitHandle: debounce(function () { | 
				
			||||
 | 
					      this.$refs['dataForm'].validate((valid) => { | 
				
			||||
 | 
					        if (!valid) { | 
				
			||||
 | 
					          return false | 
				
			||||
 | 
					        } | 
				
			||||
 | 
					        this.$http[!this.dataForm.id ? 'post' : 'put']('/sys/appmenutemplate/', 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> | 
				
			||||
@ -0,0 +1,129 @@ | 
				
			|||||
 | 
					<template> | 
				
			||||
 | 
					  <el-card shadow="never" | 
				
			||||
 | 
					           class="aui-card--fill"> | 
				
			||||
 | 
					    <div class="mod-admin__appmenutemplate}"> | 
				
			||||
 | 
					      <el-form :inline="true" | 
				
			||||
 | 
					               :model="dataForm" | 
				
			||||
 | 
					               @keyup.enter.native="getDataList()"> | 
				
			||||
 | 
					        <el-form-item> | 
				
			||||
 | 
					          <el-input v-model="dataForm.id" | 
				
			||||
 | 
					                    placeholder="id" | 
				
			||||
 | 
					                    clearable></el-input> | 
				
			||||
 | 
					        </el-form-item> | 
				
			||||
 | 
					        <el-form-item> | 
				
			||||
 | 
					          <el-button @click="getDataList()">{{ $t('query') }}</el-button> | 
				
			||||
 | 
					        </el-form-item> | 
				
			||||
 | 
					        <el-form-item> | 
				
			||||
 | 
					          <el-button v-if="$hasPermission('admin:appmenutemplate:save')" | 
				
			||||
 | 
					                     type="primary" | 
				
			||||
 | 
					                     @click="addOrUpdateHandle()">{{ $t('add') }}</el-button> | 
				
			||||
 | 
					        </el-form-item> | 
				
			||||
 | 
					        <el-form-item> | 
				
			||||
 | 
					          <el-button v-if="$hasPermission('admin:appmenutemplate:delete')" | 
				
			||||
 | 
					                     type="danger" | 
				
			||||
 | 
					                     @click="deleteHandle()">{{ $t('deleteBatch') }}</el-button> | 
				
			||||
 | 
					        </el-form-item> | 
				
			||||
 | 
					      </el-form> | 
				
			||||
 | 
					      <el-table v-loading="dataListLoading" | 
				
			||||
 | 
					                :data="dataList" | 
				
			||||
 | 
					                border | 
				
			||||
 | 
					                @selection-change="dataListSelectionChangeHandle" | 
				
			||||
 | 
					                style="width: 100%;"> | 
				
			||||
 | 
					        <el-table-column type="selection" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center" | 
				
			||||
 | 
					                         width="50"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="gradationFlag" | 
				
			||||
 | 
					                         label="是否渐变色" | 
				
			||||
 | 
					                         :formatter="formatGradationFlag" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="backgroundColor" | 
				
			||||
 | 
					                         label="背景颜色" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="startColor" | 
				
			||||
 | 
					                         label="开始色" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="endColor" | 
				
			||||
 | 
					                         label="终止色" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="lableColor" | 
				
			||||
 | 
					                         label="标签颜色" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="icon" | 
				
			||||
 | 
					                         label="菜单图标" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="templateCode" | 
				
			||||
 | 
					                         label="模板编码" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column prop="templateName" | 
				
			||||
 | 
					                         label="模板名称" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center"></el-table-column> | 
				
			||||
 | 
					        <el-table-column :label="$t('handle')" | 
				
			||||
 | 
					                         fixed="right" | 
				
			||||
 | 
					                         header-align="center" | 
				
			||||
 | 
					                         align="center" | 
				
			||||
 | 
					                         width="150"> | 
				
			||||
 | 
					          <template slot-scope="scope"> | 
				
			||||
 | 
					            <el-button v-if="$hasPermission('admin:appmenutemplate:update')" | 
				
			||||
 | 
					                       type="text" | 
				
			||||
 | 
					                       size="small" | 
				
			||||
 | 
					                       @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}</el-button> | 
				
			||||
 | 
					            <el-button v-if="$hasPermission('admin:appmenutemplate:delete')" | 
				
			||||
 | 
					                       type="text" | 
				
			||||
 | 
					                       size="small" | 
				
			||||
 | 
					                       @click="deleteHandle(scope.row.id)">{{ $t('delete') }}</el-button> | 
				
			||||
 | 
					          </template> | 
				
			||||
 | 
					        </el-table-column> | 
				
			||||
 | 
					      </el-table> | 
				
			||||
 | 
					      <el-pagination :current-page="page" | 
				
			||||
 | 
					                     :page-sizes="[10, 20, 50, 100]" | 
				
			||||
 | 
					                     :page-size="limit" | 
				
			||||
 | 
					                     :total="total" | 
				
			||||
 | 
					                     layout="total, sizes, prev, pager, next, jumper" | 
				
			||||
 | 
					                     @size-change="pageSizeChangeHandle" | 
				
			||||
 | 
					                     @current-change="pageCurrentChangeHandle"> | 
				
			||||
 | 
					      </el-pagination> | 
				
			||||
 | 
					      <!-- 弹窗, 新增 / 修改 --> | 
				
			||||
 | 
					      <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 AddOrUpdate from './appmenutemplate-add-or-update' | 
				
			||||
 | 
					export default { | 
				
			||||
 | 
					  mixins: [mixinViewModule], | 
				
			||||
 | 
					  data () { | 
				
			||||
 | 
					    return { | 
				
			||||
 | 
					      mixinViewModuleOptions: { | 
				
			||||
 | 
					        getDataListURL: '/sys/appmenutemplate/page', | 
				
			||||
 | 
					        getDataListIsPage: true, | 
				
			||||
 | 
					        deleteURL: '/sys/appmenutemplate', | 
				
			||||
 | 
					        deleteIsBatch: true | 
				
			||||
 | 
					      }, | 
				
			||||
 | 
					      dataForm: { | 
				
			||||
 | 
					        id: '' | 
				
			||||
 | 
					      } | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  components: { | 
				
			||||
 | 
					    AddOrUpdate | 
				
			||||
 | 
					  }, | 
				
			||||
 | 
					  methods: { | 
				
			||||
 | 
					    formatGradationFlag: function (row, column) { | 
				
			||||
 | 
					      return row.gradationFlag === '1' ? '是' : row.state === '0' ? '未知' : '否' | 
				
			||||
 | 
					    } | 
				
			||||
 | 
					  } | 
				
			||||
 | 
					} | 
				
			||||
 | 
					</script> | 
				
			||||
					Loading…
					
					
				
		Reference in new issue