dz2.1/src/views/permissionPage/index.vue

<template>
  <div class="permissionPage">
    <PublicPageHeader page-title="界面配置管理" @handleAdd="handleAdd">
      <el-button size="small" @click="handleAdd()" type="primary">高级查询</el-button>
    </PublicPageHeader>
    <PublicPageTable :table-data="tableData" @handleDetails="handleDetails" @handleEdit="handleEdit" @handleRemove="handleRemove" />
    <PublicPageDialog :dialog-title="dialogTitle" :dialog-drawer="dialogDrawer" @handleClose="handleClose" @handleSubmit="submitTable">
      <el-form ref="dialogForm" :rules="rules" :model="dialogForm">
        <el-form-item label="权限项名称" prop="pagename">
          <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入权限项名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="权限项类型" prop="pagetype">
          <el-select size="small" v-model="dialogForm.pagetype" clearable placeholder="请选择权限项类型">
            <el-option label="模块" value="1"></el-option>
            <el-option label="页面" value="2"></el-option>
            <el-option label="按钮" value="3"></el-option>
            <el-option label="表格" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属应用" prop="pagetype">
          <el-select size="small" v-model="dialogForm.pagetype" clearable placeholder="请选择所属应用">
            <el-option label="模块" value="1"></el-option>
            <el-option label="页面" value="2"></el-option>
            <el-option label="按钮" value="3"></el-option>
            <el-option label="表格" value="4"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限项编码">
          <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入权限项编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-select size="small" v-model="dialogForm.pagename" clearable placeholder="请选择是否显示">
            <el-option label="是" value="1"></el-option>
            <el-option label="否" value="0"></el-option>
          </el-select>
        </el-form-item>
        <template v-if="!dialogForm.pagetype || dialogForm.pagetype == 1 || dialogForm.pagetype == 2">
          <el-form-item label="路由地址">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入路由地址" clearable></el-input>
          </el-form-item>
          <el-form-item v-if="dialogForm.pagetype == 2" label="页面路径">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入页面路径" clearable></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入描述" clearable></el-input>
          </el-form-item>
        </template>
        <template v-else-if="dialogForm.pagetype == 3">
          <el-form-item label="打开方式">
            <el-select size="small" v-model="dialogForm.pagename" clearable placeholder="请选择打开方式">
              <el-option label="跳转页面" value="1"></el-option>
              <el-option label="打开弹框" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="跳转地址">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入跳转地址" clearable></el-input>
          </el-form-item>
          <el-form-item label="弹框标识">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入弹框标识" clearable></el-input>
          </el-form-item>
          <el-form-item label="传递参数">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入传递参数" clearable></el-input>
          </el-form-item>
          <el-form-item label="数据服务ID">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入数据服务ID" clearable></el-input>
          </el-form-item>
        </template>
        <template v-else-if="dialogForm.pagetype == 4">
          <el-form-item label="显示方式">
            <el-select size="small" v-model="dialogForm.pagename" clearable placeholder="请选择显示方式">
              <el-option label="树形" value="1"></el-option>
              <el-option label="表格" value="2"></el-option>
              <el-option label="树形表格" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="数据服务ID">
            <el-input size="small" v-model="dialogForm.pagename" placeholder="请输入数据服务ID" clearable></el-input>
          </el-form-item>
        </template>
      </el-form>
    </PublicPageDialog>
  </div>
</template>

<script>
import PublicPageHeader from '@/components/PublicPageHeader'
import PublicPageTable from '@/components/PublicPageTable'
import PublicPageDialog from '@/components/PublicPageDialog'
export default {
  name: 'permissionPage',
  components: { PublicPageHeader, PublicPageTable, PublicPageDialog },
  data () {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        children: [{
          id: 31,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          id: 32,
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }]
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      dialogDrawer: false,
      dialogTitle: '新增界面配置',
      dialogForm: {
        pagename: '',
        pagetype: ''
      },
      rules: {
        pagename: [
          { required: true, message: '请输入权限项名称', trigger: 'blur' },
        ],
        pagetype: [
          { required: true, message: '请选择权限类型', trigger: 'change' },
        ]
      }
    }
  },
  methods: {
    //获取页面数据
    async getPageData () {
      const { code, message, returnData } = await getVCode();
      if (code == 0 && isValue(returnData)) {
        const { verifyCodeImage } = returnData;
        this.baseImg = verifyCodeImage;
      } else {
        this.$message.error(message);
      }
    },
    //新增
    handleAdd () {
      this.dialogDrawer = true
      this.dialogTitle = '新增界面配置'
    },
    //详情
    handleDetails (row) {
      console.log(row)
    },
    //编辑
    handleEdit (row) {
      this.dialogDrawer = true
      this.dialogTitle = '编辑界面配置'
      console.log(row)
    },
    //删除
    handleRemove (row) {
      console.log(row)
    },
    //关闭
    handleClose () {
      this.$refs['dialogForm'].resetFields()
      this.dialogDrawer = false
    },
    submitTable () {
      this.$refs['dialogForm'].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>
</style>