udiwms-vue-frame/src/views/dev/devicePlanProject.vue

<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <div class="fr">
          <el-button type="primary" @click="chooseItemList=[];chooseDetailItemFlag=true">添加巡检项目</el-button>
          <el-button type="" @click="getDetailItemList">刷新</el-button>
        </div>
      </div>
      <el-table :data="itemList" ref="itemTable" v-loading="itemLoading" row-key="itemCode">
        <el-table-column label="序号" width="50" type="index"/>
        <el-table-column label="项目编码" width="150" prop="itemCode"/>
        <el-table-column label="项目名称" width="200" prop="name"/>
        <el-table-column label="项目内容" width="250" prop="content"/>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text"
                       @click="delDetailItem(scope.row)"
            >移除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--      <pagination-->
      <!--        v-show="itemTotal>0"-->
      <!--        :total="itemTotal"-->
      <!--        :page.sync="itemQuery.page"-->
      <!--        :limit.sync="itemQuery.limit"-->
      <!--        @pagination="getDetailItemList"-->
      <!--      />-->
    </el-card>

    <el-dialog
      title="添加巡检项目"
      :visible="true"
      v-if="chooseDetailItemFlag"
      @close="chooseDetailItemFlag = false"
      width="80%"
    >
      <deviceProjectAdd style="margin: 0"
                        :planId="projectItem.planId"
                        :projectItem="projectItem"
                        :closeAddDevice="closeAddDevice"/>
    </el-dialog>
  </div>
</template>

<script>
import {
  devicePlanDetailItemAdd,
  devicePlanDetailItemByDeviceCodeDel,
  devicePlanDetailItemDel,
  devicePlanDetailItemPage
} from "@/api/dev/devicePlanDetailItemApi";
import {getLoading} from "@/utils";
import deviceProjectAdd from "@/views/dev/deviceProjectAdd";

export default {
  name: "devicePlanProject",
  props: {
    projectItem: {
      type: Object,
      required: true
    },
    planId: {
      type: Object,
      required: true
    },
  },
  data() {
    return {
      itemList: [],
      itemTotal: 0,
      itemLoading: false,
      itemQuery: {
        planId: null,
        page: 1,
        limit: 10,
        deviceCode: '',
        itemCode: '',
        name: '',
        content: '',
      },
      chooseItemList: [],
      chooseDetailItemFlag: false,
    }
  },
  methods: {
    getDetailItemList() {
      this.itemLoading = true
      this.itemQuery.deviceCode = this.projectItem.deviceCode
      this.itemQuery.planId = this.projectItem.planId
      devicePlanDetailItemPage(this.itemQuery).then(res => {
        this.itemLoading = false
        if (res.code != 20000) {
          this.$message.error(res.message)
          return
        }
        this.itemList = res.data.list || []
        this.itemTotal = res.data.total || 0
      }).catch(e => {
        this.itemList = []
        this.itemTotal = 0
        this.itemLoading = false
      })
    },
    delDetailItem(row) {
      this.$confirm("此操作将会永久删除该条明细，且将在下一次任务生效，现有任务不受影响，是否继续", "提示", {
        confirmButtonText: "继续",
        cancelButtonText: "取消"
      }).then(() => {
        let load = getLoading(this)
        devicePlanDetailItemByDeviceCodeDel(row.planId, row.deviceCode, row.itemCode).then(res => {
          load.close()
          if (res.code != 20000) {
            this.$message.error(res.message)
            return
          }
          this.$message.success(res.message)
          this.itemQuery.page = 1
          this.getDetailItemList()
        }).catch(() => {
          load.close()
        })
      })
    },
    chooseDetailItem() {
      let loading = getLoading(this)
      let param = {
        planId: this.itemQuery.planId,
        productId: this.itemQuery.productId,
        deviceCode: this.itemQuery.deviceCode,
        itemCodes: this.chooseItemList
      }
      devicePlanDetailItemAdd(param).then(res => {
        loading.close()
        if (res.code != 20000) {
          this.$message.error(res.message)
          return
        }
        this.chooseItemList = []
        this.$message.success(res.message)
        this.chooseDetailItemFlag = false
        this.itemQuery.page = 1
        this.getDetailItemList()

      }).catch(e => {
        loading.close()
      })
    },
    itemSelectChangFunc(list) {
      this.chooseItemList = list.map(i => i.code)
    },


    closeAddDevice() {
      this.chooseDetailItemFlag = false;
      this.getDetailItemList()
    },
  },

  created() {
    this.getDetailItemList()
  },

  components: {
    deviceProjectAdd
  }
  ,
}
</script>

<style scoped>

</style>