adm/src/views/data_admin/buildTask/index.vue

<template>
	<div>
    <task-statistics ref="statistics"></task-statistics>
    <div class="hanson-bar">
      <el-cascader v-model="taskTypes" :options="taskTypeList" filterable @change="handleChangeTask"
                   style="width:240px;"></el-cascader>
      <el-divider direction="vertical"></el-divider>
      <div class="condition-list">
        <floor-cascader v-show="taskType == 'device' || taskType == 'assets'" :isWidth="false"
                        @change="changeFloor"></floor-cascader>
        <task-state v-show="taskType == 'model' || taskType == 'device' || taskType == 'assets'" ref="taskState"
                    @change="changeState"></task-state>
        <model-file v-show="taskType == 'model'" ref="modelFile" @change="handleChangeModel"></model-file>
        <model-cascader v-show="taskType == 'model'" :isWidth="false" ref="modelCascader"
                        @change="changeModelCascader"></model-cascader>
        <device-cascader v-show="taskType == 'device'" :isWidth="false" ref="deviceCascader"
                         @change="changeDeviceCascader"></device-cascader>
        <assets-cascader v-show="taskType == 'assets'" :isWidth="false" ref="assets"
                         @change="changeAssetsCascader"></assets-cascader>
      </div>
      <el-button class="add-task" @click="handleAddTaskDialog">添加验证任务</el-button>
    </div>
    <div class="tabel-box">
      <model-table :paramsData="{taskState, modelFile, modelCategory}" v-if="taskType == 'model'" @upData="upData"></model-table>
      <device-table :paramsData="{buildfloor, taskState, deviceCategory}" v-else-if="taskType == 'device'"
                    @upData="upData"></device-table>
      <assets-table :paramsData="{buildfloor, taskState, family}" v-else-if="taskType == 'assets'" @upData="upData"></assets-table>
      <tear-table v-else-if="taskType == 'tear'"></tear-table>
      <replace-table v-else-if="taskType == 'replace'"></replace-table>
    </div>
		<add-task :addTaskDialog.sync="addTaskDialog" :newTaskTypes="newTaskTypes"></add-task>
	</div>
</template>

<script>
  import {mapGetters} from "vuex"
  import taskStatistics from '@/components/data_admin/buildTask/taskStatistics'
  import floorCascader from "@/components/ledger/lib/floorCascader"

  import taskState from "@/components/data_admin/buildTask/lib/taskState"
  import modelFile from "@/components/data_admin/buildTask/lib/modelFile"
  import modelCascader from "@/components/data_admin/buildTask/lib/modelCascader"
  import deviceCascader from "@/components/data_admin/buildTask/lib/deviceCascader"
  import assetsCascader from "@/components/data_admin/buildTask/lib/assetsCascader"

  import modelTable from "@/components/data_admin/buildTask/table/modelTable"
  import deviceTable from "@/components/data_admin/buildTask/table/deviceTable"
  import assetsTable from "@/components/data_admin/buildTask/table/assetsTable"
  import tearTable from "@/components/data_admin/buildTask/table/tearTable"
  import replaceTable from "@/components/data_admin/buildTask/table/replaceTable"
  import addTask from "@/components/data_admin/buildTask/dialog/addTaskDialog"

  export default {
    components: {
      taskState,
      modelCascader,
      taskStatistics,
      floorCascader,
      modelFile,
      deviceCascader,
      assetsCascader,
      modelTable,
      deviceTable,
      assetsTable,
      tearTable,
      replaceTable,
      addTask
    },
    computed: {
      ...mapGetters("layout", ["projectId", "secret", "userId"]),
      taskType() {
        return this.taskTypes.slice(-1)[0]
      }
    },
    data() {
      return {
        taskTypeList: [
          {
            value: "verification", label: '现场验证任务', children: [
              {value: "model", label: '现场验证模型'},
              {value: "device", label: '现场验证设备台账'},
              {value: "assets", label: '现场验证资产台账'}
            ]
          },
                {value: "tear", label: '现场撕码任务'},
				{ value: "replace", label: '现场换码任务' }
			],
			taskStateList: [{
				value: '',
				label: '全部'
			}, {
				value: 1,
				label: '待验证'
			}, {
				value: 0,
				label: '已完成'
			}, {
				value: -1,
				label: '未找到'
			}],
			taskState: '',//任务执行情况
			modelFile: '',//模型文件
			modelCategory: '',//模型-设备类型
			deviceCategory: '',//设备-设备类型
			family: '',//设备族
			buildfloor: ['all'],//建筑楼层
			taskTypes: [],
			addTaskDialog: false, //是否显示添加任务弹窗
			newTaskTypes:''
    }
	},
	created(){
		this.$route.query.newTaskTypes?this.newTaskTypes = this.$route.query.newTaskTypes:this.newTaskTypes = ['verification','model']
		this.taskTypes = this.newTaskTypes
	},
  methods: {
    upData() {
      this.$refs.statistics.upDataList()
    },
    handleChangeTask(val) {//切换任务类型
      this.newTaskTypes = val;
      this.upData();
    },
    handleChangeModel(val) {//修改模型文件
      if (val[1]) {
        this.modelFile = val[1];
      } else {
        this.modelFile = '';
      }
      this.upData();
    },
    changeState(val) {//修改任务执行情况
      this.taskState = val;
      this.upData();
    },
    changeFloor(val) {//修改建筑楼层
      this.buildfloor = val;
      this.upData();
    },
    changeModelCascader(val) {//修改模型-设备类型
      this.modelCategory = val.code;
      this.upData();
    },
    changeDeviceCascader(val) {//修改设备-设备类型
      this.deviceCategory = val.code;
      this.upData();
    },
    changeAssetsCascader(val) {//修改设备族
      this.family = val.code;
      this.upData();
    },
    handleAddTaskDialog() {
      if(this.taskTypes[0] =='tear' ||this.taskTypes[0] =='replace' ) {
        this.$message.info('产品设计中。。。')
      } else {
      this.addTaskDialog = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
	.hanson-bar {
    height: 40px;
    padding: 5px 0;
    font-size: 14px;
    overflow: hidden;
    margin-top: 0;
    line-height: 40px;
		position: relative;
		.condition-list{
			display: inline-block;
			vertical-align: middle;
			line-height: 32px;
		}
		.add-task{
			position: absolute;
			right: 0;
			top: 9px;
		}
	}
	.tabel-box{
		height: calc(100% - 170px);
	}
</style>