epmet-oper-pc/epmet-oper-web/src/views/modules/productConfig/customizeFunction/CustomFun.vue

<template>
  <div>
    <el-card shadow="never"
             class="aui-card--fill">
      <div class="mod-demo__demo}">

        <el-form :inline="true"
                 :model="tableParams">
          <el-form-item>
            <el-input v-model="tableParams.customizedName"
                      placeholder="功能名称"
                      clearable>

            </el-input>
          </el-form-item>
          <el-form-item>
            <el-select v-model="tableParams.fromApp"
                       placeholder="来源"
                       clearable>
              <el-option v-for="item in form.data['fromApp']"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button @click="loadTableData()">查询</el-button>
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       @click="addShow()">新增</el-button>
          </el-form-item>

        </el-form>

        <c-table column-type=""
                 ref="table"
                 :url="tableUrl"
                 :params="tableParams"
                 :operationWidth="80"
                 keyword="CustomizedFunction"
                 :operations="operations"
                 :tableHeight="tableHeight"
                 @editShow="editShow"
                 @del="del">
        </c-table>

      </div>
    </el-card>

    <edit ref="ref_edit"
          @editDiaOK="editDiaOK">

    </edit>

  </div>
</template>

<script>
import CDialog from '@c/CDialog'
import CTable from '@c/CTable'
import Edit from './Edit'

import { mapGetters } from 'vuex'
import { Loading } from 'element-ui' // 引入Loading服务

let loading// 加载动画

export default {
  data () {
    return {
      selCodeId: '',
      // 查询相关
      tableParams: {
        customizedName: '', // 客户
        fromApp: '' // 类型
      },
      // 列表相关
      // tableUrl: 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/functioncustomized/functioncustomizedlist',
      tableUrl: '/oper/customize/functioncustomized/functioncustomizedlist',

      operations: [
        {
          lable: '修改', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'editShow', // 回调方法名称
          isShow: (row) => {
            return true
          }
        },
        {
          lable: '删除', // 按钮显示名称
          size: 'mini',
          style: 'margin: 0 6px;',
          type: 'text',
          slot: '',
          plain: false,
          methodName: 'del', // 回调方法名称
          isShow: (row) => {
            return true
          }
        }

      ],

      // //  修改弹出框相关
      // editDia: {
      //   visible: false
      // },

      src: '',
      // 查询栏下拉框数据
      form: {
        dataUrl: [], // 下拉框/单选框/复选框等获取数据的url
        data: { // 全部下拉框数据
          fromApp: [
            {
              value: 'resi',
              label: '居民端'
            },
            {
              value: 'gov',
              label: '工作端'
            }
          ]

        }
      }
    }
  },
  components: {
    CDialog, CTable, Edit
  },
  activated () {
    this.$nextTick(() => {
      this.$refs.table.doLayout() // 解决表格错位
    })
  },
  mounted () {
    this.renderSelData()
    this.loadTableData()
  },
  computed: {
    tableHeight () {
      return this.clientHeight - 60 - 80 - 80 - 90
    },
    ...mapGetters(['clientHeight', 'env'])
  },
  methods: {
    // 刷新
    refresh () {
      this.loadTableData()
    },
    // 加载列表数据
    loadTableData () {
      this.$nextTick(() => {
        this.$refs.table.loadData() // 获取表格数据
      })
    },
    // 新增
    addShow () {
      this.$refs['ref_edit'].init('', 'A')
    },
    // 编辑
    editShow (row) {
      this.$refs['ref_edit'].init(row.functionId, 'U')
    },

    // 删除
    del (row) {
      this.$confirm('确认删除当前定制功能', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // const url = 'https://nei.netease.com/api/apimock-v2/e3b1d0eb88e905f6c7ee559b2d6bb7ad/oper/customize/functioncustomized/deletefunctioncustomized'
        const url = '/oper/customize/functioncustomized/deletefunctioncustomized'
        const param = {
          functionId: row.functionId
        }
        window.app.ajax.post(url, param,
          (data, rspMsg) => {
            this.$message.success('删除成功' + rspMsg)
            this.refresh()
          },
          (rspMsg, data) => {
            this.$message.error(rspMsg)
          })
      }).catch(() => {

      })
    },

    editDiaOK () {
      this.refresh()
    },
    editDiaCancel () {

    },

    async renderSelData () { // 渲染下拉框/单选框/复选框等数据

    },

    // 开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: '正在加载……', // 加载中需要显示的文字
        background: 'rgba(0,0,0,.7)' // 背景颜色
      })
    },
    // 结束加载动画
    endLoading () {
      // clearTimeout(timer);
      if (loading) {
        loading.close()
      }
    }
  }
}
</script>
<style>
.el-upload__tip {
  color: rgb(155, 155, 155);
}
</style>