epmet-work-pc/src/views/modules/communityService/labelConfig/index.vue

<template>
    <div class="g-main">
        <div class="m-search">
            <el-form :inline="true"
               :model="formData"
               ref="ref_searchform"
               :label-width="'120px'">
        <el-form-item label="标签名称"
                      prop="tagName">
          <el-input v-model="formData.tagName"
                    size="small"
                    class="u-item-width-normal"
                    clearable
                    placeholder="请输入">
          </el-input>

        </el-form-item>
          <el-row type="flex" >
            <el-col :span="24" align="right">
                <el-button style="margin-left:30px"
                   size="small"
                   type="primary "
                   @click="handleSearchFrom">查询</el-button>
            </el-col>
          </el-row>
        

      </el-form>
        </div>
        <div class="m-table">
            <div class="div_btn">
                <el-button
                    style="height:32px;"
                    size="small"
                    @click="handleAdd({},'add')"
                    type="primary"
                    icon="el-icon-plus"
                >
                    新增</el-button
                >
             </div> 
             <el-table
             ref="config_table"
             border
            :data="tableData"
             v-loading="tableLoading"
             style="width: 100%"
             :height="tableHeight"
             >  
                 <el-table-column
                    label="标签名称"
                    prop="tagName"
                    fixed="left"
                    align="center"
                    key="tagName"
                />
                <el-table-column fixed="right" label="操作" align="center" width="200">
                    <template slot-scope="scope">
                        <el-button
                            style="margin-right: 10px"
                            @click="handleAdd(scope.row,'edit')"
                            size="small"
                            type="text"
                            >修改</el-button
                        >
                        <!--   按钮权限-->
                        <template >
                       
                        <el-popconfirm
                            title="删除之后无法回复，确认删除？"
                            @onConfirm="handleDel(scope.row)"
                        >
                            <el-button
                            size="small"
                            type="text"
                            slot="reference"
                            >删除</el-button
                            >
                        </el-popconfirm>
                        </template>
                    </template>
                 </el-table-column>

             </el-table> 

             <div class="div-flex">
                <div class="m-page">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageNo"
                        :page-sizes="[20, 50, 100, 200]"
                        :page-size="pageSize"
                        layout="sizes, prev, pager, next, total"
                        :total="total"
                    >
                    </el-pagination>
                 </div>
             </div>
        </div>
        <el-dialog :visible.sync="formShow"
               :close-on-click-modal="false"
               :close-on-press-escape="false"
               :title="formTitle"
               destroy-on-close
               width="900px"
               top="5vh"
               class="dialog-h"
               @closed="diaClose"
               
               >
             <add-form 
                        v-if="formShow"
                        ref="Config_form"
                       :row-obj="rowObj"
                      @dialogCancle="addFormCancle"
                      @dialogOk="addFormOk"></add-form>
    </el-dialog>
    </div>
</template>

<script>
import { requestPost } from "@/js/dai/request";
import { mapGetters } from "vuex";
import addForm from "./addForm.vue"
export default {
    name:"labelConfig",
    data(){
        return{
            formData:{
                tagName:""
            },
            tableData:[],
            pageNo:1,
            pageSize:20,
            tableLoading:true,
            total:0,
            searchH:115,
            formShow:false,
            formTitle:"",
            rowObj:{}
        }

    },
    created(){
    },
    components:{addForm},
    methods:{
      async getlabelConfigList(){
          const url = "/governance/resiSearchTag/listResiSearchTags"   
          let params = {
            pageNo:this.pageNo,
            pageSize:this.pageSize,
            tagName:this.formData.tagName
          } 
          let {data,msg,code} = await requestPost(url,params)
          this.tableLoading = false
          if(code == 0 ){
            this.tableData = data.list
            this.total = data.total
          }else{
            this.$message.error(msg)
          }
        },
        addFormCancle () {
            this.formShow = false
        },
        addFormOk () {
            this.formShow = false
            this.getlabelConfigList()
        },
        handleAdd (row,type) {
            if(type=="add"){
            this.formTitle = '新增标签'
            this.formShow = true
            // this.$nextTick(() => {
            // this.$refs.Config_form.initForm(type, row)
            // })
            }else {
            this.formTitle = '修改标签'
            this.formShow = true
            console.log(row);
            this.rowObj = row
            this.$nextTick(() => {
            this.$refs.Config_form.initForm(type, row)
            })
            }
      },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.getlabelConfigList()
        },
        async handleDel(row){
            const url = `/governance/resiSearchTag/deleteResiSearchTag/${row.tagId}`
            let {code,msg} = await requestPost(url)
            if(code == 0 ){
                this.$message.success('删除成功')
            }else {
                this.$message.error(msg)
                
            }
            this.getlabelConfigList()
        },
        handleSearchFrom(){
            this.getlabelConfigList()
        },
        handleCurrentChange(val) {
            this.pageNo = val;
            this.getlabelConfigList();
        },
        diaClose () {
            this.formShow = false
        },  
    },
    async mounted(){
          this.getlabelConfigList()
    },
    computed:{
    ...mapGetters(["clientHeight", "iframeHeight"]),
        tableHeight() {
            const h = this.clientHeight - this.searchH - 275 + this.iframeHeight;
            const _h = this.clientHeight - 275 - this.searchH;
            return this.$store.state.inIframe ? h : _h;
        },
    },
    watch:{}
}
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/list-main.scss";
.div_btn{
    margin-bottom: 12px;
}
</style>