epmet-work-pc-chengyang/src/views/modules/communityParty/comPromotion/index.vue

<template>
  <div class="g-main">
    <div class="m-search">
      <el-form :inline="true" ref="ref_searchform" :label-width="'100px'">
        <div>
          <el-form-item label="文章标题">
            <el-input v-model.trim="typeName" size="small" class="item_width_1" clearable placeholder="请输入">
            </el-input>
          </el-form-item>

          <el-form-item label="标签">
            <el-select class="item_width_1" v-model.trim="enabled" size="small" placeholder="请选择" clearable>
              <el-option v-for="item in unitList" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          
          <el-form-item label="状态">
            <el-select class="item_width_1" v-model.trim="enabled" size="small" placeholder="请选择" clearable>
              <el-option v-for="item in unitList" :key="item.value" :label="item.name" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
       
           <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
    </el-date-picker>
  </div>
  <div class="block">
    <span class="demonstration">带快捷选项</span>
    <el-date-picker
      v-model="value2"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>


        

          <div style="display: flex; justify-content: flex-end;">
            <el-button style="margin-left:10px" class="diy-button--blue" size="small"
              @click="handleSearch">查询</el-button>
            <el-button style="margin-left:10px" class="diy-button--white" size="small"
              @click="resetSearch">重置</el-button>
          </div>
        </div>
      </el-form>
    </div>
    <div class="m-table">

<div class="div_btn">
  <el-button style="" class="diy-button--add" size="small" @click="handleAdd">新增</el-button>
</div>

<el-table class="table" :data="tableData" border :height="tableHeight" v-loading="tableLoading"
  style="width: 100%">

  <el-table-column label="序号" header-align="center" align="center" type="index" width="80"></el-table-column>
  <el-table-column prop="title" header-align="center" align="center" label="文章标题" width="380">
  </el-table-column>
  <el-table-column prop="tagId" header-align="center" align="center" label="标签" width="150">
    <!-- <template slot-scope="scope">
      <span>{{ scope.row.enabled === 1 ? '关闭' : '显示' }}</span>
    </template> -->
  </el-table-column>

  <el-table-column prop="status" header-align="center" align="center" label="状态" width="100">
        <template slot-scope="scope">
      <span>{{ scope.row.status === 1 ? '已下线' : '已发布' }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="createdTime" header-align="center" align="center" label="发布单位" width="200">
  </el-table-column>
  <el-table-column prop="top" header-align="center" align="center" label="置顶" width="100">
    <template slot-scope="scope">
      <span>{{ scope.row.top === 1 ? '是' : '否' }}</span>
    </template>
  </el-table-column>
  <el-table-column prop="top" header-align="center" align="center" label="点赞数" width="100">
  </el-table-column>
  <el-table-column prop="createdTime" header-align="center" align="center" label="转发数" width="100">
  </el-table-column>
  <el-table-column label="操作" fixed="right" width="250" header-align="center" align="center" class="operate">
    <template slot-scope="scope">
  <el-button   type="text" style="color:#1C6AFD;text-decoration: underline;" size="small" @click="handleDetail(scope.row)">查看</el-button>
  <el-button v-if="scope.row.status === 1" type="text" style="color:#00A7A9;text-decoration: underline;" size="small" @click="handleEdit(scope.row)">编辑</el-button>
  <el-button v-if="scope.row.status === 1" type="text" style="color:#00A7A9;text-decoration: underline;" size="small" @click="handleDelete(scope.row)">删除</el-button>
  <el-button v-if="scope.row.status === 1" type="text" style="color:#00A7A9;text-decoration: underline;" size="small" @click="handleOnline(scope.row)">上线</el-button>
  <el-button v-if="scope.row.status === 0 " type="text" style="color:#00A7A9;text-decoration: underline;" size="small" @click="handleOffline(scope.row)">下线</el-button>
</template>
  </el-table-column>
</el-table>

      <div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="pageNo"
          :page-sizes="[10, 20, 50]" :page-size="pageSize" layout="sizes, prev, pager, next, total" :total="total">
        </el-pagination>
      </div>
    </div>

    <!-- 修改弹出框 -->
    <el-dialog :visible.sync="formShow" :close-on-click-modal="false" :close-on-press-escape="false" :title="formTitle"
      width="950px" top="5vh" class="dialog-h" @closed="diaClose">
      <add ref="ref_form" :unitList="corganizerList" :gridList="gridList" @dialogCancle="addFormCancle"
        @dialogOk="addFormOk"></add>
    </el-dialog>

    <el-dialog :visible.sync="detailShow" :close-on-click-modal="false" :close-on-press-escape="false" :title="'活动详情'"
      width="950px" top="5vh" class="dialog-h" @closed="diaClose">
      <viewPromotionalTags ref="ref_detail" :gridList="gridList" @dialogCancle="addFormQ"></viewPromotionalTags>
    </el-dialog>
  </div>
</template>

    <script>
    import { Loading } from 'element-ui' // 引入Loading服务
    import { requestPost, requestGet } from '@/js/dai/request';
    import add from "./add.vue";
            export default {
      data () {
        return {
          loading: false,
          total: 0,
          pageSize: 10,
          pageNo: 0,
          tableLoading: false,
          agencyId: '',
          gridList: [],//所属网格
          typeName:'',
          enabled:'',
          //form相关
          formShow: false,
          formTitle: '新增活动',
          detailShow: false,
          endPickerOptions: {
        disabledDate: endDisabledDate
      },
      startPickerOptions: {
        disabledDate: startDisabledDate
      },
        }
      },
      components: {
        add
      },
    //   components: {
    //     typeActivityadd, typeDetails
    //   },
      async created () {
    
      },
      async mounted () {
        //获取服务事项
        // await this.getDemandOptions()
    
        const { user } = this.$store.state
        this.agencyId = user.agencyId
    
        //获取建联单位
        // this.loadUnit()
        // this.loadGrid()
        //获取网格下拉框数据
        this.loadTable()    
      },
    
      methods: {
        handleSearch () {
          this.loadTable()
        },
        async loadTable () {
          this.tableLoading = false
          const url = "/actual/base/communityPublicity/page"
          let params = {
            pageSize: 20,
            pageNo: 1,
            title: "",
            tagId: "",
            startTime: "",
            endTime: ""
          }
          const { data, code, msg } = await requestPost(url, params)
          if (code === 0) {
            this.total = data.total
            this.tableData = data.list
          } else {
            this.$message.error(msg)
          }
          this.tableLoading = false
        },
        handleAdd () {
          this.formTitle = '新增'
    
          this.formShow = true
          this.$nextTick(() => {
            // this.$refs.ref_form.initForm('add', null)
          })
        },
    
        diaClose () {
          // this.$refs.ref_form.resetData()
          this.formShow = false
        },
    
        detailClosed () {
          console.log(this.$refs.ref_detail)
          // this.$refs.ref_detail.diaDestroy()
          this.detailShow = false
        },
    
    
        handleDetail (row) {
          this.detailShow = true
          this.formTitle = '详情'
    
          this.$nextTick(() => {
            this.$refs.ref_detail.initForm(row)
            // this.$refs.ref_form.initForm('detail', row.id)
          })
        },
    
        handleAdd () {
          this.formTitle = '新增'
    
          this.formShow = true
          this.$nextTick(() => {
            // this.$refs.ref_form.initForm('add', null)
          })
        },
        handleEdit (row) {
          this.formTitle = '修改'
          this.formShow = true
          this.$nextTick(() => {
            this.$refs.ref_form.initForm(row)
          })
        },
     
        addFormCancle () {
          this.formShow = false
        },
        addFormQ(){
          this.detailShow = false
        },
        addFormOk () {
          this.formShow = false
          this.loadTable()
    
        },
    
        async handleDelete (row) {
    
          this.$confirm("确认删除?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          })
            .then(() => {
              this.deleteActivity(row)
            })
            .catch(err => {
              if (err == "cancel") {
    
              }
    
            });
        },
    
        async deleteActivity (row) {
          console.log(row)
          const url = "/actual/base/advertisingTag/delete"
          // const url = "http://yapi.elinkservice.cn/mock/245/heart/icpartyactivity/delete"
    			let idArr=[row.id]
          const { data, code, msg } = await requestPost(url, idArr)
    
          if (code === 0) {
            this.$message({
              type: "success",
              message: "删除成功"
            });
    
            this.loadTable()
          } else {
            this.$message.error(msg)
          }
        },
    
        //重置搜索条件
        resetSearch () {
          this.typeName = ''
          this.loadTable()
        },

        handleSizeChange (val) {
          this.pageSize = val
          this.pageNo = 1
          this.loadTable()
        },
        handleCurrentChange (val) {
          this.pageNo = val
          this.loadTable()
        },
    
       
   
      },

    }
    
    </script>
    <style lang="scss" scoped >
            .g-main {
      width: 100%;
    }
  
    .m-search {
      background: #ffffff;
      border-radius: 4px;
      padding: 30px 20px 5px;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
    }
  
    .item_width_1 {
      width: 260px;
    }
  
    .item_width_2 {
      width: 495px;
    }
  
    .m-table {
      background: #ffffff;
      box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      margin-top: 15px;
      padding: 23px 30px 10px;
  
      .table {
        margin-top: 20px;
      }
    }
  
    .div_btn {
      display: flex;
      justify-content: space-between;
    }
  
    .el-row {
      /* margin-bottom: 20px; */
      display: flex;
      flex-wrap: wrap;
      margin-top: 10px;
      margin-right: 50px;
    }
  </style>