imcs-yj-fe-admin/imcs-tenant-admin/src/views/zuihou/internetCenter/moduleMgr/Index.vue

<template>
  <div class="app-container">
  	<!-- 搜索表单 -->
    <div class="filter-container">
    	<span>
				<span>模型名称：</span>
				<el-input v-model="queryParams.model.name" placeholder="请输入名称" style="width: 150px;" size="medium"/>
			</span>

			<span class="rearchItem">
				<span>启用状态：</span>
				<el-select v-model="queryParams.model.status" placeholder="请选择启用状态" size="medium" style="width: 150px;">
        		<el-option
				      v-for="item in statusList"
				      :key="item.value"
				      :label="item.label"
				      :value="item.value">
				    </el-option>
          </el-select>
			</span>

			<span class="rearchItem">
				<span>类型：</span>
				<el-select style="width:150px;" placeholder="请选择类型" v-model="queryParams.model.nodeType" value>
          <el-option :key="index" :label="item" :value="key" v-for="(item, key, index) in dicts.MODEL_NODE_TYPE" />
        </el-select>
			</span>
			<span class="rearchItem">
	      <el-button plain type="primary" icon="el-icon-search" size="medium" @click="search">
	        {{ $t("table.search") }}
	      </el-button>
	      <el-button plain type="warning" icon="el-icon-refresh" size="medium" @click="reset">
	        {{ $t("table.reset") }}
	      </el-button>
      </span>
    </div>

    <el-row class="filter-container">
    	<el-col>
    		<el-button type="primary" icon="el-icon-plus" size="medium" @click="add">
	        {{ $t("table.add") }}
	      </el-button>
	      <el-button type="success" icon="el-icon-edit" size="medium" @click="editOne">
	        {{ $t("common.edit") }}
	      </el-button>
	      <el-button type="danger" icon="el-icon-delete" size="medium" @click="batchDelete">
	        {{ $t("table.delete") }}
	      </el-button>
	      <el-button type="primary" icon="el-icon-check" size="medium" @click="updateActiveStatus('1')">
	        {{ $t("table.qiyong") }}
	      </el-button>
	      <el-button type="primary" icon="el-icon-warning-outline" size="medium" @click="updateActiveStatus('0')">
	        {{ $t("table.dongjie") }}
	      </el-button>
    	</el-col>
    </el-row>

    <el-table
      :key="tableKey"
      ref="table"
      v-loading="loading"
      :data="tableData.records"
      border
      fit
      row-key="id"
      style="width: 100%;"
      @filter-change="filterChange"
      @selection-change="onSelectChange"
      @sort-change="sortChange"
      @cell-click="cellClick"
    >
      <el-table-column align="center" type="selection" width="40px" :reserve-selection="true" />
      <el-table-column prop="name" label="模型名称" :show-overflow-tooltip="true" width="200px"></el-table-column>
      <el-table-column prop="no" label="编号" :show-overflow-tooltip="true" width="120px"></el-table-column>
      <el-table-column prop="status" label="状态" align="center" width="90px">
        <template slot-scope="{ row }">
          <el-tag :type="row.status=='1' ? 'success' : 'info'">
          	{{ row.status=='1' ? '启用' : '停用' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="nodeType.data" label="类型" :show-overflow-tooltip="true" width="100px"></el-table-column>
      <el-table-column prop="brandDesc" label="品牌" :show-overflow-tooltip="true" width="150px"></el-table-column>
      <el-table-column prop="specificationDesc" label="规格" :show-overflow-tooltip="true" width="200px"></el-table-column>
      <el-table-column prop="remark" label="描述" :show-overflow-tooltip="true" width="250px"></el-table-column>
      <el-table-column
        :label="$t('table.operation')"
        fixed="right"
        align="center"
        column-key="operation"
        width="150px"
      >
        <template slot-scope="{ row }">
        	<el-tooltip class="item" content="查看详情" effect="dark" placement="top-start">
	          <i
	            class="el-icon-view table-operation"
	            style="color: #87d068;"
	            @click="viewDetail(row)"
	          />
          </el-tooltip>
        	<!--<el-tooltip class="item" content="查看详情" effect="dark" placement="top-start">
	          <i
	            class="el-icon-view table-operation"
	            style="color: #87d068;"
	            @click="view(row)"
	          />
          </el-tooltip>-->
          <el-tooltip class="item" content="修改" effect="dark" placement="top-start">
	          <i
	            class="el-icon-edit table-operation"
	            style="color: #2db7f5;"
	            @click="edit(row)"
	          />
          </el-tooltip>
          <el-tooltip class="item" content="删除" effect="dark" placement="top-start">
	          <i
	            class="el-icon-delete table-operation"
	            style="color: #f50;"
	            @click="singleDelete(row)"
	          />
          </el-tooltip>
          <el-tooltip class="item" content="冻结" effect="dark" placement="top-start">
	          <i
	            class="el-icon-warning-outline table-operation"
	            style="color: #f50;"
	            @click="dongJieRow(row)"
	          />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="tableData.total > 0"
      :limit.sync="queryParams.size"
      :page.sync="queryParams.current"
      :total="Number(tableData.total)"
      @pagination="fetch"
    />
    <tenant-edit
      ref="edit"
      :dialog-visible="dialog.isVisible"
      :title="dialog.title"
      @close="editClose"
      @success="editSuccess"
    />
    <tenant-view
      ref="view"
      :dialog-visible="tenantViewVisible"
      @close="viewClose"
    />
    <el-dialog
      v-el-drag-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      title="预览"
      width="80%"
      top="50px"
      :visible.sync="preview.isVisible"
    >
      <el-scrollbar>
        <div v-html="preview.context" />
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"
import TenantEdit from "./components/Edit"
import TenantView from "./components/View"
// 【模型管理】-API
import moduleMgrApi from "@/api/enterpriseMgr/moduleMgr"
import elDragDialog from '@/directive/el-drag-dialog'
import { downloadFile, initEnums, initQueryParams } from '@/utils/commons'
// 共通工具方法（字典分解）
import { convertEnum } from '@/utils/utils'
// 查询【字典】的共通方法
import { initDicts } from '@/utils/commons'
export default {
  name: "ModuleMgr",
  directives: { elDragDialog },
  components: { Pagination, TenantEdit, TenantView },
  data () {
    return {
      statusList: [], // 在模型状态数据
	    dicts: {
	      MODEL_CATEGORY: {},  //分类
	      MODEL_NODE_TYPE: {},  //节点类型
	      MODEL_NET_MODE: {},  //联网方式
        MODEL_JOIN_AGREEMENT: {}, //接入盒子协议
        MODEL_CNC_SYSTEM: {}, //cnc数控系统
	    },
      dialog: {
        isVisible: false,
        title: ""
      },
      preview: {
        isVisible: false,
        context: ''
      },
      tenantViewVisible: false,
      tableKey: 0,
      queryParams: initQueryParams({}),
      selection: [],
      loading: false,
      tableData: {
        total: 0
      },
      enums: {
        TenantTypeEnum: {},
        TenantStatusEnum: {}
      }
    }
  },
  // 实例已经在内存中创建好，此时data和methods已将ok,如果要操作data中的数据或是调用methods中的方法，最早只能在created中操作
  created() {
  	// 调用常量-初始化值
  	this.statusList = this.$constWKS.STATUSLIST;
	},
  computed: {
    currentUser () {
      return this.$store.state.account.user
    },
    categoryList() {
	    return convertEnum(this.dicts.MODEL_CATEGORY)
	  },
	  nodeTypeList() {
	    return convertEnum(this.dicts.MODEL_NODE_TYPE)
	  },
	  netModeList() {
	    return convertEnum(this.dicts.MODEL_NET_MODE)
	  },
	  jionAgreementList() {
	    return convertEnum(this.dicts.MODEL_JOIN_AGREEMENT)
	  },
    cncSystemList() {
      return convertEnum(this.dicts.MODEL_CNC_SYSTEM)
    }
  },
  mounted () {
  	// 初始化，【字典】数据
  	initDicts(['MODEL_CATEGORY', 'MODEL_NODE_TYPE', 'MODEL_NET_MODE', 'MODEL_JOIN_AGREEMENT','MODEL_CNC_SYSTEM'], this.dicts);
    this.fetch()
  },
  methods: {
  	// 【查看详情】按钮-事件
  	viewDetail(row){
  		// 把【模型管理】对象，添加到路由传值
    	// 调用全局挂载的方法
			this.$store.dispatch('tagsView/delView', this.$route).then(res => {
				this.$router.push({ path: '/internetCenter/moduleDetail', query: row}) //带参跳转
			})
  	},
    // 【启用/冻结】按钮-事件
    updateActiveStatus(status){
    	if (!this.selection.length) {
        this.$message({
          message: "请至少选择一条数据！",
          type: "warning"
        })
        return
      }
    	if (this.selection.length > 1) {
        this.$message({
          message: "请只能选择一条数据！",
          type: "warning"
        })
        return
      }
    	// 传值
    	let obj = {};
    	obj = this.selection[0];
    	obj.status = status;
    	// 调用接口后的提示信息
    	let msg = "冻结成功！";
    	if(status == "1"){
    		msg = "启用成功！";
    	}
    	moduleMgrApi.updateActiveStatus(obj).then(response => {
        if (response.status == 200) {
          this.$message({
            message: msg,
            type: "success"
          })
          // 重新查询列表数据
          this.search()
        }
      })
    },
    // 【冻结】-Table的Row操作事件
    dongJieRow(row) {
    	// 传值
    	let obj = {};
    	obj = row;
    	obj.status = "0";
    	moduleMgrApi.updateActiveStatus(obj).then(response => {
        if (response.status == 200) {
          this.$message({
            message: "冻结成功！",
            type: "success"
          })
          // 重新查询列表数据
          this.search()
        }
      })
    },
    viewClose () {
      this.tenantViewVisible = false
    },
    editClose () {
      this.dialog.isVisible = false
    },
    editSuccess () {
      this.search()
    },
    onSelectChange (selection) {
      this.selection = selection
    },
    search () {
      this.fetch({
        ...this.queryParams
      })
    },
    reset () {
      this.queryParams = initQueryParams({})
      this.$refs.table.clearSort()
      this.$refs.table.clearFilter()
      this.search()
    },
    exportExcelPreview () {
      if (this.queryParams.timeRange) {
        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
      }
      this.queryParams.map.fileName = '导出模型数据'
      moduleMgrApi.preview(this.queryParams).then(response => {
        const res = response.data
        this.preview.isVisible = true
        this.preview.context = res.data
      })
    },
    exportExcel () {
      if (this.queryParams.timeRange) {
        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
      }
      this.queryParams.map.fileName = '导出模型数据'
      moduleMgrApi.export(this.queryParams).then(response => {
        downloadFile(response)
      })
    },
    add () {
      this.$refs.edit.type = "add"
      // 把数据，设置到【查看】弹出组件
      this.$refs.edit.setTenant(false, this.dicts)
      this.dialog.title = this.$t("common.add")
      this.dialog.isVisible = true
    },
    singleDelete (row) {
      this.$confirm("删除模型数据后，会将模型数据全部删除，确认删除？", this.$t("common.tips"), {
      	distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
      	this.$refs.table.clearSelection()
      	this.$refs.table.toggleRowSelection(row, true)
      	// 可以多个删除
		    // this.batchDelete()
		    // 单个删除
		    this.deleteOnly(row.id)
      }).catch(() => {})
    },
    batchDelete () {
      if (!this.selection.length) {
        this.$message({
          message: this.$t("tips.noDataSelected"),
          type: "warning"
        })
        return
      }

			if (this.selection.length > 1) {
        this.$message({
          message: "请只能选择一条数据！",
          type: "warning"
        })
        return
      }
      this.$confirm("删除模型数据后，会将模型数据全部删除，确认删除？", this.$t("common.tips"), {
      	distinguishCancelAndClose: true,
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
      	/*const ids = []
	      this.selection.forEach(item => {
	        ids.push(item.id)
	      })
	      // 可以多个删除
	      this.delete(ids)*/
	      // 单个删除
	      this.deleteOnly(this.selection[0].id)
      }).catch(() => {})
    },
    clearSelections () {
      this.$refs.table.clearSelection()
    },
    delete (ids) {
      moduleMgrApi.remove({ ids: ids }).then(response => {
        const res = response.data
        if (res.isSuccess) {
          this.$message({
            message: this.$t("tips.deleteSuccess"),
            type: "success"
          })
          this.search()
          // 清理已经删除的数据
          this.$refs.table.clearSelection()
        }
      })
    },
    // 每次只删除一条数据API
    deleteOnly (id) {
      moduleMgrApi.delete({ id }).then(response => {
        const res = response.data
        if (res.isSuccess) {
          this.$message({
            message: this.$t("tips.deleteSuccess"),
            type: "success"
          })
          this.search()
          // 清理已经删除的数据
          this.$refs.table.clearSelection()
        }
      })
    },
    updateStatus (ids) {
      moduleMgrApi.updateStatus({ 'ids[]': ids }).then(response => {
        const res = response.data
        if (res.isSuccess) {
          this.$message({
            message: '禁用成功',
            type: "success"
          })
          this.search()
        }
      })
    },
    view (row) {
    	// 把数据，设置到【查看】弹出组件
      this.$refs.view.setTenant(row)
      this.tenantViewVisible = true
    },
    // 【修改】表头上Btn-事件
    editOne() {
    	if (!this.selection.length) {
        this.$message({
          message: "请至少选择一条数据！",
          type: "warning"
        })
        return
      }
    	if (this.selection.length > 1) {
        this.$message({
          message: "请只能选择一条数据！",
          type: "warning"
        })
        return
      }
    	console.log("选择的数据：", this.selection[0]);
    	this.edit(this.selection[0]);
    },
    edit (row) {
      if (row.readonly) {
        this.$message({
          message: this.$t("tips.systemData"),
          type: "warning"
        })
        return
      }
      // 把数据，设置到【查看】弹出组件
      this.$refs.edit.setTenant(row, this.dicts)
      this.$refs.edit.type = "edit"
      this.dialog.title = this.$t("common.edit")
      this.dialog.isVisible = true
    },
    fetch (params = {}) {
      this.loading = true
      if (this.queryParams.timeRange) {
        this.queryParams.map.createTime_st = this.queryParams.timeRange[0]
        this.queryParams.map.createTime_ed = this.queryParams.timeRange[1]
      }

      this.queryParams.current = params.current ? params.current : this.queryParams.current
      this.queryParams.size = params.size ? params.size : this.queryParams.size

      moduleMgrApi.page(this.queryParams).then(response => {
        const res = response.data
        if (res.isSuccess) {
        	// 赋值
          this.tableData = res.data
          this.tableData.records.forEach((item, index) => {
        		// item.url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
        		item.srcList = [item.pic];
        	})
        }
        // eslint-disable-next-line no-return-assign
      }).finally(() => this.loading = false)
    },
    sortChange (val) {
      this.queryParams.sort = val.prop
      this.queryParams.order = val.order
      if (this.queryParams.sort) {
        this.search()
      }
    },
    filterChange (filters) {
      for (const key in filters) {
        if (key.includes('.')) {
          const val = {}
          val[key.split('.')[1]] = filters[key][0]
          this.queryParams.model[key.split('.')[0]] = val
        } else {
          this.queryParams.model[key] = filters[key][0]
        }
      }
      this.search()
    },
    cellClick (row, column) {
      if (column['columnKey'] === "operation") {
        return
      }
      let flag = false
      this.selection.forEach((item) => {
        if (item.id === row.id) {
          flag = true
          this.$refs.table.toggleRowSelection(row)
        }
      })

      if (!flag) {
        this.$refs.table.toggleRowSelection(row, true)
      }
    }
  }
}
</script>
<style>
	.rearchItem{
		margin-left: 15px;
	}
</style>
<style lang="scss" scoped>

</style>