kd-aiot-frontend/src/views/rulesManagement/matterRules/index.vue

<template>
  <div class="ele-body">
     <el-card shadow="never" v-loading="loading">
	   <matter-search @search="reload">
	   </matter-search>
	   <!-- 数据表格 -->
	   <ele-pro-table
	     ref="table"
	     :columns="columns"
	     :datasource="datasource"
	     cache-key="systemRoleTable"
	   >
	     <!-- 表头工具栏 -->
	     <template v-slot:toolbar>
	       <el-button
	         size="small"
	         type="primary"
	         icon="el-icon-plus"
	         class="ele-btn-icon"
	         @click="openEdit('add')"
	       >
	         新建
	       </el-button>
	     </template>
		 <!-- 编码列 -->
		 <template v-slot:code="{ row }">
		   <el-link type="primary" :underline="false" @click="goDetail(row)">
		     {{ row.code }}
		   </el-link>
		 </template>
	     <!-- 操作列 -->
	     <template v-slot:action="{ row }">
		   <el-link
		     type="primary"
		     :underline="false"
		     icon="el-icon-finished"
		     @click="openEdit('clone',row)"
		   >
		     克隆
		   </el-link>
	       <el-link
	         type="primary"
	         :underline="false"
	         icon="el-icon-edit"
	         @click="openEdit('edit',row)"
	       >
	         修改
	       </el-link>
	       <el-popconfirm
	         class="ele-action"
	         title="确定要删除此角色吗？"
	         @confirm="remove(row)"
	       >
	         <template v-slot:reference>
	           <el-link type="danger" :underline="false" icon="el-icon-delete">
	             删除
	           </el-link>
	         </template>
	       </el-popconfirm>
	     </template>
	   </ele-pro-table>
     </el-card>
	 
	 <!-- 新建或编辑弹窗 -->
	 <matter-add
	   ref="addMatterRulesRef"
	   :pageType="pageType"
	   :dialogTitle="dialogTitle"
	   @done="reload"
	 />
  </div>
</template>

<script>

  import MatterSearch from './components/matter-search.vue';
  import MatterAdd from './components/matter-add.vue';
  import { getList , getDetail , removeRule } from '@/api/ruleManagement/matter';
  import dictMixins from '@/mixins/dictMixins';
  export default {
	mixins: [dictMixins],
    components: {
        MatterSearch,
	    MatterAdd
    },
    data () {
      return {
		// 表格列配置
		columns: [
			{
				columnKey: 'index',
				label: '序号',
				type: 'index',
				width: 55,
				align: 'center',
				showOverflowTooltip: true,
				fixed: 'left'
			},
			{
				prop: 'code',
				label: '规则编码',
				align: 'center',	
				showOverflowTooltip: true,
				minWidth: 110,
				slot:'code'
			},
			{
				prop: 'status',
				label: '状态',
				align: 'center',
				showOverflowTooltip: true,
				minWidth: 110,
				formatter: (_row, _column, cellValue) => {
				  return this.getDictValue('规则状态',  _row.status)
				}
			},
			{
				prop: 'ruleType',
				label: '规则类型',
				align: 'center',	
				showOverflowTooltip: true,
				slot: 'enable',
				minWidth: 110,
				formatter: (_row, _column, cellValue) => {
				  return this.getDictValue('规则类型',  _row.ruleType)
				}
			},
			{
				prop: 'name',
				label: '规则名称',
				align: 'center',	
				showOverflowTooltip: true,
				minWidth: 110
			},
			{
				prop: 'cycle',
				label: '周期',
				align: 'center',	
				showOverflowTooltip: true,
				minWidth: 110,
				formatter: (_row, _column, cellValue) => {
				  return this.getDictValue('规则周期',  _row.cycleType)
				}
			},
			{
				prop: 'createUserName',
				label: '创建人',
				align: 'center',	
				showOverflowTooltip: true,
				minWidth: 110
			},
			{
				prop: 'createTime',
				label: '创建时间',
				align: 'center',
				showOverflowTooltip: true,
				minWidth: 110,
				formatter: (_row, _column, cellValue) => {
					return this.$util.toDateString(cellValue);
				}
			},
			{
				columnKey: 'action',
				label: '操作',
				width: 230,
				align: 'center',
				resizable: false,
				slot: 'action',
				showOverflowTooltip: true
			}
		],
        // 加载状态
        loading: false,
        pageType: 'add',
        dialogTitle: '',
      };
    },
    computed: {

    },
	created () {
	  this.requestDict('规则周期');
	  this.requestDict('规则类型');
	  this.requestDict('规则状态');
	},
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        return getList({ pageNum: page, size: limit, ...where });
      },
      /* 刷新表格 */
      reload(where) {
        this.$refs.table.reload({ page: 1, where });
      },
	  
	  remove(row){
		  removeRule([row.id]).then(res=>{
			  this.$message.success('删除成功！')
			  this.reload()
		  })
	  },
	  
	  openEdit(type,row){
		  this.pageType = type
		  this.dialogTitle = type=='add'? '新建规则':(type=='edit'?'编辑规则':'克隆规则')
		  this.$refs.addMatterRulesRef.openDialog(row , type)
	  },
	  
	  goDetail({id}){
		  this.$router.push({
		    path: '/rulesManagement/matterRules/details',
		    query: {id}
		  })
	  },

    }
  };
</script>

<style lang="scss" scoped>

</style>