<template> 
 | 
  <GlobalWindow 
 | 
    :title="dictName + '数据管理'" 
 | 
     
 | 
    :visible.sync="visible" 
 | 
    :with-footer="false" 
 | 
  > 
 | 
    <TableLayout :with-breadcrumb="false"> 
 | 
      <!-- 表格和分页 --> 
 | 
      <template v-slot:table-wrap> 
 | 
        <!-- <ul class="toolbar"> 
 | 
          <li><el-button type="primary" @click="$refs.operaDictDataWindow.open('新建字典数据', searchForm.dictId)" icon="el-icon-plus">新建</el-button></li> 
 | 
          <li><el-button @click="deleteByIdInBatch" icon="el-icon-delete">删除</el-button></li> 
 | 
        </ul> --> 
 | 
        <el-table 
 | 
          v-loading="isWorking.search" 
 | 
          :data="tableData.list" 
 | 
          stripe 
 | 
          border 
 | 
          @selection-change="handleSelectionChange" 
 | 
        > 
 | 
           
 | 
          <el-table-column prop="label" label="数据标签" align="center" min-width="100px"></el-table-column> 
 | 
          <!-- <el-table-column prop="code" label="数据值" min-width="100px"></el-table-column> --> 
 | 
          <!-- <el-table-column prop="disabled" label="状态" min-width="100px"> 
 | 
            <template slot-scope="{row}">{{row.disabled | disabledText}}</template> 
 | 
          </el-table-column> --> 
 | 
          <el-table-column prop="code" label="数据值" align="center" min-width="160px" show-overflow-tooltip> 
 | 
            <template slot-scope="{row}"> 
 | 
              <el-button v-if="row.label =='USER_AGREEMENT' || row.label =='ABOUT_USER'" type="text" @click="showProtocl(row)">点击查看</el-button> 
 | 
              <el-button v-else-if="row.label =='PROJECT_HOME_HEAD_IMG'" type="text" @click="showPic(row)">点击查看</el-button> 
 | 
              <div v-else class="long-title-style">{{ row.code }}</div> 
 | 
            </template> 
 | 
          </el-table-column> 
 | 
          <el-table-column prop="createUser" label="创建人" align="center" min-width="100px"> 
 | 
            <template slot-scope="{row}">{{row.createUserInfo == null ? '' : row.createUserInfo.username}}</template> 
 | 
          </el-table-column> 
 | 
          <el-table-column prop="updateUser" label="更新人" align="center" min-width="100px"> 
 | 
            <template slot-scope="{row}">{{row.updateUserInfo == null ? '' : row.updateUserInfo.username}}</template> 
 | 
          </el-table-column> 
 | 
          <el-table-column prop="createTime" label="创建时间" align="center" min-width="140px"></el-table-column> 
 | 
          <el-table-column prop="updateTime" label="更新时间" align="center" min-width="140px"></el-table-column> 
 | 
          <el-table-column 
 | 
            label="操作" 
 | 
            min-width="80" 
 | 
            fixed="right" 
 | 
            align="center" 
 | 
          > 
 | 
            <template slot-scope="{row}"> 
 | 
              <el-button type="text" @click="$refs.operaDictDataWindow.open('编辑字典数据', searchForm.dictId, row)" >编辑</el-button> 
 | 
              <!-- <el-button type="text" @click="deleteById(row)" icon="el-icon-delete">删除</el-button> --> 
 | 
            </template> 
 | 
          </el-table-column> 
 | 
        </el-table> 
 | 
        <pagination 
 | 
          @size-change="handleSizeChange" 
 | 
          @current-change="handlePageChange" 
 | 
          :pagination="tableData.pagination" 
 | 
        ></pagination> 
 | 
      </template> 
 | 
      <!-- 新建/修改 --> 
 | 
      <OperaDictDataWindow ref="operaDictDataWindow" @success="handlePageChange(tableData.pagination.pageIndex)"/> 
 | 
      <Protocol ref="protocol"/> 
 | 
      <el-image-viewer  
 | 
        v-if="showViewer"  
 | 
        :on-close="closeViewer" 
 | 
        :initialIndex="0" 
 | 
        :url-list="srcList" 
 | 
        :z-index="3000" 
 | 
      /> 
 | 
    </TableLayout> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseTable from '@/components/base/BaseTable' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import OperaDictDataWindow from './OperaDictDataWindow' 
 | 
import Protocol from "../Protocol.vue"; 
 | 
import ElImageViewer from 'element-ui/packages/image/src/image-viewer' 
 | 
export default { 
 | 
  name: 'DictDataManagerWindow', 
 | 
  extends: BaseTable, 
 | 
  components: { OperaDictDataWindow, TableLayout, GlobalWindow, Pagination, Protocol, ElImageViewer }, 
 | 
  data () { 
 | 
    return { 
 | 
      visible: false, 
 | 
      searchForm: { 
 | 
        // 字典ID 
 | 
        dictId: null 
 | 
      }, 
 | 
      showViewer: false, 
 | 
      srcList: [], 
 | 
      // 字典名称 
 | 
      dictName: '' 
 | 
    } 
 | 
  }, 
 | 
  methods: { 
 | 
    // 打开数据管理 
 | 
    open (dictId, dictName) { 
 | 
      this.searchForm.dictId = dictId 
 | 
      this.dictName = dictName 
 | 
      this.visible = true 
 | 
      this.search() 
 | 
    }, 
 | 
    showProtocl(row){ 
 | 
      this.$refs.protocol.open('',row) 
 | 
    }, 
 | 
    showPic(row) { 
 | 
      this.srcList = [row.code] 
 | 
      // debugger 
 | 
      this.showViewer = true 
 | 
    }, 
 | 
    closeViewer() { 
 | 
      this.showViewer = false 
 | 
    }, 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/system/dictData', 
 | 
      'field.main': 'label' 
 | 
    }) 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style scoped lang="scss"> 
 | 
::v-deep .window__body { 
 | 
  .table-content { 
 | 
    padding: 0; 
 | 
    .table-wrap { 
 | 
      padding-top: 0; 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</style> 
 |