tuanfeng-pc-admin/src/views/rm-bank/tab/index.vue

<template>
  <div class="tab">
    <div class="tab-search">
      <el-form :inline="true" :model="tabQuery">
        <el-form-item label="搜索">
          <el-input @input="ListBack" v-model="tabQuery.search" placeholder="请输入搜索内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">搜索</el-button>
          <el-button type="primary" @click=" dialogVisibleTyep()">新增</el-button>
        </el-form-item>
      </el-form>


    </div>
    <div class="tab-header">

      <el-table :data="tableData" :preserve-expanded-content="preserveExpanded" border
        :tree-props="{ children: 'children', checkStrictly: false }" row-key="id">
        <!-- <el-table-column type="selection" width="55" :selectable="selectable" /> -->
        <el-table-column type="index" width="50" label="序号" />
        <el-table-column prop="name" width="600" label="名字" />
        <el-table-column width="100px" prop="id" label="标签id" />
        <el-table-column prop="updateTime" label="创建时间" />
        <!-- <el-table-column prop="sort" label="Address" /> -->
        <el-table-column prop="sort" label="排序值" />
        <el-table-column prop="status" label="操作">
          <template slot-scope="scope">
            <!-- <el-button type="text" @click="checkRow(scope.row)">查看</el-button> -->
            <el-button type="text" @click="updateRow(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="修改分类" width=500>
      <el-form :model="classifyDetail" label-width="80px">
        <el-form-item label="标签类型">
          <el-radio-group v-model="radio">
            <el-radio @change="radioChange" :label=true size="large">一级标签</el-radio>
            <el-radio @change="radioChange" :label=false size="large">二级标签</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="一级标签">
          <el-select :disabled="radio" v-model="value" placeholder="请选择一级标签" size="large" style="width: 240px"
            @change="changeSelect(value)">
            <el-option v-for="item in fatherList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称">
          <el-input v-model="classifyDetail.name" :placeholder="nameText" />
        </el-form-item>
        <el-form-item label="标签排序">
          <el-input v-model="classifyDetail.sort" type="Number" width="400" :placeholder="sortNumber" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="add">确定</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 修改 -->
    <el-dialog :visible.sync="updataType" title="修改分类" width=500>
      <el-form :model="classifyDetail" label-width="80px">
       
        <el-form-item label="标签名称">
          <el-input v-model="classifyDetail.name" />
        </el-form-item>
        <el-form-item label="标签排序">
          <el-input v-model="classifyDetail.sort" type="Number" width="400"  />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateConfirm">确定</el-button>
          <el-button @click="updataType = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getTreeTypesApi, getTypesApi, deleteByIdApi, labelByIdApi, saveLabelApi,updateByIdApi } from '@/api/rm-bank'
export default {
  data() {
    return {
      // searchText:''
      tabQuery: {
        search: '',
        type: 1,
      },
      getTypesList: {
        type: '1',
        search: ''
      },
      tableData: [],
      'treeProps.checkStrictly': true,
      dialogVisible: false,
      updataType:false,
      //分类
      classifyDetail: {
        "parentId": 0,
        "name": '',
        "sort": '',
        "type": 1
      },
      fatherList: [],
      value: '',
      radio: true,
      nameText: '请输入标签名称',
      sortNumber: '请输入排序号（数字，越小越靠前）'
    }
  },
  created() {
    this.getTreeTypeList()
    this.getTypes()
  },
  methods: {
    async getTreeTypeList() {
      const res = await getTreeTypesApi()
      // console.log(res)
      this.fatherList = res.data
    },
    async getTypes() {
      const res = await getTypesApi(this.getTypesList)
      // console.log(res)
      this.tableData = res.data

    },
    //查看详情
    // async checkRow(row) {
    //   // console.log(row);
    //   const choseId = { id: row.id }
    //   const res = await labelByIdApi(
    //     choseId
    //   )
      // console.log(res);
    // },
    // 修改信息
    async updateRow(e) {
      
      const res = await labelByIdApi({ id: e.id })
      // console.log(res.data);
      this.classifyDetail = res.data
      this.updataType = true
      // this.dialogVisibleTyep()
    },
    async updateConfirm() {
      // console.log(this.classifyDetail);
      const res = await updateByIdApi(this.classifyDetail)
      // console.log(res.data);
      this.getTypes()
      this.updataType = false


    },
    // 删除信息
    async deleteRow(row) {
      // this.deleteWindow()
      const deleteId = { id: row.id }
      // const res = await deleteByIdApi(deleteId)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deleteByIdApi(deleteId)
        if(res.code == 200){
        this.$message({
          type: 'success',
          message: '删除成功!',
        });
        this.getTypes()
      }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async search() {
      const res = await getTypesApi(this.tabQuery)
      // console.log(res);
      this.tableData = res.data
    },
    async add() {
      this.dialogVisibleTyep()
      const res = await saveLabelApi(this.classifyDetail)
      // console.log(res.data);
      this.getTypes()

    },
    dialogVisibleTyep() {
      this.dialogVisible = !this.dialogVisible
      // console.log(123);
    },
    radioChange() {
      // console.log(this.radio);
      if (this.radio) {
        this.classifyDetail.parentId = '0'
      } else {
        // this.classifyDetail.parentId = '2'
      }
      // console.log(this.classifyDetail.parentId);
    },
    changeSelect(e) {
      // console.log(e);
      this.classifyDetail.parentId = e
    },
    ListBack() {
      if (!this.tabQuery.search) {
        this.classifyDetail = {
          "parentId": 0,
          "name": '',
          "sort": '',
          "type": 1
        }
        setTimeout(() => {
          this.getTypes()

        }, 500);

      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import url("../../../styles/elDialog.scss");

.tab {
  margin-top: 20px;

  /* padding-left: 20px; */
  .tab-top {
    display: flex;
  }

  .tab-search {
    padding-left: 20px;
  }
}</style>