goldenPig/src/views/Video/CameraBrand.vue

<template>
  <div class="cameraBrand">
    <!-- 查询   -->
    <query-conditions :formItems="searchList" @getQueryParams="handleQuery"></query-conditions>
    <!--  表格   -->
    <new-table :height="600" :title="title" :listData="brandLists" :tableItems="tableItems" :shows="tableShows" @selectionChange="selectionChange">
      <template #right>
        <div>
          <el-button size="mini" type="primary"  v-if="hasPerm('brand:add')" @click="dialogVisible = true">添加品牌</el-button>

          <el-button size="mini" type="danger" v-if="hasPerm('brand:del')" @click="delAll">批量删除</el-button>

        </div>
      </template>
      <template #streamType="scope">
        <div>
          <span v-if="scope.row.streamType === 0">主码流</span>
          <span v-else>辅码流</span>
        </div>
      </template>
      <template #handler="scope">
        <el-button size="mini" @click="edit(scope.row)"  v-if="hasPerm('brand:edit')" style="margin-right: 10px">编辑</el-button>
        <el-popconfirm
            title=" 确定要删除这个区域吗？"
            @confirm="del(scope.row)"
        >
          <el-button type="danger"  v-if="hasPerm('brand:del')" size="mini" slot="reference">删除</el-button>
        </el-popconfirm>
      </template>
    </new-table>
    <table-footer
        :totals="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @pageChange="pageChange"></table-footer>
    <!-- 新增编辑   -->
    <el-dialog
        :title="showType ? '编 辑' : '新 增'"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
          <el-form-item label="品牌名称" prop="brandName">
            <el-input v-model="form.brandName"></el-input>
          </el-form-item>
          <el-form-item label="主码流" prop="mainStream">
            <el-input v-model="form.mainStream"></el-input>
          </el-form-item>
          <el-form-item label="副码流" prop="assistStream">
            <el-input v-model="form.assistStream"></el-input>
          </el-form-item>
          <el-form-item label="所用码流" prop="streamType">
            <el-select v-model="form.streamType">
              <el-option v-for="item in options" :label="item.name" :value="item.id" :key="item.id"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="主码流">-->
<!--            <el-input v-model="form.mainStream"></el-input>-->
<!--          </el-form-item>-->
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="onSubmit('form')">{{showType ? '更 新' : '新 增'}}</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import QueryConditions from "@/components/bioSafety/QueryConditions";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
import {brandList, addBarand, delBarand, editBarand } from '../../utils/api.js';
import {arrToIds} from "@/utils";
export default {
  name: "CameraBrand",
  components: {
    QueryConditions,
    NewTable,
    TableFooter
  },
  data() {
    return {
      searchList: [
        {
          type: 'input',
          label: '品牌搜索：',
          placeholder: '请输入品牌',
          field: 'keyWord'
        },
      ],
      brandLists: [],
      title: '摄像头品牌列表',
      tableItems: [
        {
          prop: 'brandName',
          label: '品牌名称',
          minWidth: '150',
          slotName: 'brandName'
        },
        {
          prop: 'mainStream',
          label: '主码流',
          minWidth: '150',
          slotName: 'mainStream'
        },
        {
          prop: 'assistStream',
          label: '副码流',
          minWidth: '150',
          slotName: 'assistStream'
        },
        {
          prop: 'streamType',
          label: '所用码流',
          minWidth: '150',
          slotName: 'streamType'
        },
        {
          label: '操作',
          minWidth: '150',
          slotName: 'handler'
        }
      ],
      tableShows: {
        showIndex: false,
        showSelect: true
      },
      pageNum: 1,
      pageSize: 20,
      total: 0,
      keyWord: '',
      form: {
        brandName: '',
        mainStream: '',
        assistStream: '',
        streamType: 0,
      },
      rules: {
        brandName: [
          { required: true, message: '品牌名称不能为空', trigger: 'blur' }
        ],
        mainStream: [
          { required: true, message: '主码流不能为空', trigger: 'blur' }
        ],
        assistStream: [
          { required: true, message: '副码流不能为空', trigger: 'blur' }
        ],
        streamType: [
          { required: true, message: '所用码流不能为空', trigger: 'change' }
        ]
      },
      options: [
        {
          id: 0,
          name: '主码流'
        },
        {
          id: 1,
          name: '辅码流'
        }
      ],
      dialogVisible: false,
      showType: false,
      selectList: []
    }
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum= val;
      this.init();
    },
    handleQuery(data) {
      this.keyWord = data.keyWord;
      this.pageNum = 1;
      this.init()
    },
    init() {
      let params = {
        current: this.pageNum,
        size: this.pageSize,
        brandName: this.keyWord
      }
      brandList(params).then(res => {
        if(res.code === 10000) {
          this.brandLists = res.data.records;
          this.total = res.data.total;
        }
      })
    },
    edit(row) {
      this.form = {
        id: row.id,
        brandName: row.brandName,
        mainStream: row.mainStream,
        assistStream: row.assistStream,
        streamType: row.streamType,
      }
      this.dialogVisible = true;
      this.showType = true;
    },
    // 批量选择
    selectionChange(rows) {
      this.selectList = rows;
    },
    // 批量删除
    delAll() {
      if(this.selectList.length > 0) {
        this.$confirm('此操作将永久删除这些品牌，是否继续？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let ids = arrToIds(this.selectList);
          let params = {
            ids: ids
          }
          delBarand(params).then(res => {
            if(res.code === 10000) {
              this.init();
              this.$message.success(res.message)
            } else {
              this.$message.error(res.message)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        })
        // delArea()
      } else {
        this.$message.error('请勾选需要删除的区域');
        return;
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.showType) {
            // 编辑
            let params = {
              id: this.form.id,
              brandName: this.form.brandName,
              mainStream: this.form.mainStream,
              assistStream: this.form.assistStream,
              streamType: this.form.streamType,
            }
            editBarand(params).then(res => {
              this.reset()
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message)
              } else {
                this.$message.error(res.message)
              }
            })
          } else {
            // 新增
            let params = {
              brandName: this.form.brandName,
              mainStream: this.form.mainStream,
              assistStream: this.form.assistStream,
              streamType: this.form.streamType
            }
            addBarand(params).then(res => {
              this.reset();
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message);
              } else {
                this.$message.error(res.message)
              }
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },
    reset() {
      this.showType = false;
      this.dialogVisible = false;
      this.form =  {
        brandName: '',
        mainStream: '',
        assistStream: '',
        streamType: 0,
      }
    },
    del(row) {
      let params = {
        ids: row.id
      }
      delBarand(params).then(res =>{
        if(res.code === 10000) {
          this.init()
          this.$message.success(res.message)
        } else {
          this.$message.error('删除失败')
        }
      })
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>
  .cameraBrand {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 20px;
  }
</style>