yos_web/src/HManagement/notice/pate/modules/list.vue

<template>
  <div>
    <slot name="add"></slot>
    <div class="container normal-panel normal-margin">
      <!-- 表格主题 -->
      <tableLayout :layout="tablecols" :data="pateList" :opwidth="200" :custom="true" :height="tableHieght">
        <template v-slot:customcol="scope">
          <div v-if="scope.column.columnname === 'classname'">
            <el-input v-if="act_cus === scope.column.data.sat_notice_classid" size="mini" v-model="scope.column.data.classname" placeholder="输入版块名称"></el-input>
            <p v-else>{{ scope.column.data.classname }} <i class="el-icon-edit"></i></p>
          </div>
          <!-- <div v-else-if="scope.column.columnname === 'color'">
            <el-color-picker :disabled="act_cus !== scope.column.data.sat_notice_classid" v-model="scope.column.data.fcolor"></el-color-picker>
          </div>
          <div v-else-if="scope.column.columnname === 'isused'">
            <el-switch
              :disabled="act_cus !== scope.column.data.sat_notice_classid"
              v-model="scope.column.data.fisused"
              active-color="#ff4949"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </div> -->
          <div v-else-if="scope.column.columnname === 'issecret'">
            <el-switch
              :disabled="act_cus !== scope.column.data.sat_notice_classid"
              v-model="scope.column.data.issecret"
              active-color="#ff4949"
              inactive-color="#ccc"
              :active-value="1"
              :inactive-value="0">
            </el-switch>
          </div>
          <p v-else>{{scope.column.data[scope.column.columnname]}}</p>
        </template>
        <template v-slot:opreation="scope">
          <el-button v-if="act_cus === scope.data.sat_notice_classid" size="mini" type="text" class="table-button" icon="el-icon-delete" @click="updatePate(scope.data)">保 存</el-button>
          <slot v-else name="edit" :data="scope"></slot>
          <slot name="del" :data="scope"></slot>
        </template>
      </tableLayout>
      <div style="margin-top:16px;text-align:right">
      <el-pagination
        background
        small
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="params.content.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
  
export default {
  data () {
    return {
      color1: '#409EFF',
      pateList:[],
      formInline:{},
      params:{
        "classname": "webmanage.saletool.notice.noticeclass",
        "method": "queryNoticeClass",
        "content": {
          "pageNumber": 1,
          "pageSize": 10,
          "where":{
            "condition":""
          }
        }
      },
      act_cus:0,
      total:0,
      currentPage:0,
    }
  },
  methods:{
    // 查询版块
    queryTypeList () {
      this.$api.requested(this.params).then((res)=>{
        this.pateList = res.data
        this.total = res.total
        this.currentPage = res.pageNumber
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.queryTypeList()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.queryTypeList()
    },
    // 点击行编辑
    cellClick (row) {
      this.act_cus = row.sat_notice_classid
    },
    // 插入新增行
    addPate () {
      this.act_cus = 0
      this.pateList.unshift({
        sat_notice_classid:0,
        classname:"",
        // issystem:0,
        // fisused:1,
        issecret:0,
        fcolor:'#ccc',
      })
    },
    // 新增或更新版块
    updatePate (row) {
      this.$api.requested({
        "classname": "webmanage.saletool.notice.noticeclass",
        "method": "insertormodify_noticeclass",
        "content": row
      }).then((res)=>{
        this.tool.showMessage(res)
        res.code === 1?this.act_cus = 0:''
        this.queryTypeList()
      })
    },
  },
  mounted () {
    this.queryTypeList()
  },
  created () {
    this.tablecols = this.tool.tabelCol(this.$route.name)['tablePate'].tablecols
  }
}

</script>
<style>
.clearfix{
  clear: both;
  zoom: 0;
  overflow: hidden;
}
</style>