longdianningxing/acs2/nladmin-ui/src/views/acs/device/customPolicy/task/index.vue

<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">设备名称：{{ key_code }} </span>
      </div>
      <div class="crud-opts2" style="margin-bottom: 5px;">
        <span class="crud-opts-right2">
          <!--左侧插槽-->
          <slot name="left" />
          <el-button
            slot="left"
            class="filter-item"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="insertdtl()"
          >
            新增一行
          </el-button>
        </span>

      </div>
      <div class="app-container">
        <el-table :data="modeform.plans" border fit highlight-current-row style="width: 100%;" class="tb-edit">
          <el-table-column label="起始设备" prop="from" width="180">
            <template scope="scope">
              <el-select
                v-model="scope.row.from"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.device_code"
                  :label="item.device_name"
                  :value="item.device_code"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="目标设备" prop="to" width="180">
            <template scope="scope">
              <el-select
                v-model="scope.row.to"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.device_code"
                  :label="item.device_name"
                  :value="item.device_code"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="quantity" width="180">
            <template scope="scope">
              <el-input-number v-model="scope.row.quantity" value="0" :min="0" size="mini" />
              <span v-show="scope.row.edit">{{ scope.row.quantity }}</span>
            </template>
          </el-table-column>
          <el-table-column label="任务类型" prop="type" width="180">
            <template scope="scope">
              <el-select
                v-model="scope.row.type"
                filterable
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in requestMethodList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="170">
            <template scope="scope">
              <el-button
                type="danger"
                class="filter-item"
                size="mini"
                icon="el-icon-delete"
                @click.native.prevent="deleteRow(scope.$index, modeform.plans)"
              />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span" />
        <el-button
          :loading="false"
          icon="el-icon-check"
          size="mini"
          style="float: right; padding: 6px 9px"
          type="primary"
          @click="doSubmit"
        >保存
        </el-button>
        <el-button
          :loading="false"
          icon="el-icon-check"
          size="mini"
          style="float: right; padding: 6px 9px"
          type="primary"
          @click="back"
        >取消
        </el-button>
      </div>
    </el-card>

  </div>
</template>

<script>

import { updateConfig, selectById } from '@/api/acs/device/customPolicyType'
import crud from '@/mixins/crud'
import deviceCrud from '@/api/acs/device/device'
import crudCustomPolicy from '@/api/acs/device/customPolicy'
import CRUD from '@crud/crud'

export default {
  name: 'CustomPolicyType',
  mixins: [crud],
  props: {
    parentForm: {
      type: Object,
      required: true
    }
  },
  cruds() {
    return CRUD({ title: '自定义策略', url: 'api/customPolicy', idField: 'id', sort: 'id,desc', crudMethod: { ...crudCustomPolicy }})
  },
  data() {
    return {
      requestMethodList: [{ code: 1, name: '上架' }, { code: 2, name: '下架' }, { code: 3, name: '摆渡' }],
      key_code: this.$route.query.key_code,
      id: this.$route.query.id,
      deviceList: [],
      modeform: {
        deviceCode: '',
        plans: [
          {
            from: '',
            to: '',
            quantity: null,
            type: null
          }
        ]
      },
      rules: {}
    }
  },
  created() {
    deviceCrud.selectDeviceList().then(data => {
      this.deviceList = data
    })
    selectById(this.id).then(data => {
      if (data != null && data !== '') {
        console.log(data)
        this.modeform = data
      }
    })
  },
  methods: {
    insertdtl() {
      this.modeform.plans.push({ quantity: '', type: '' })
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    doSubmit() {
      updateConfig(this.modeform.plans, this.key_code, this.id).then(res => {
        this.notify('保存成功', 'success')
        this.configLoading = false
      }).catch(err => {
        this.configLoading = false
        console.log(err.response.data.message)
      })
    },
    [CRUD.HOOK.beforeRefresh]() {
      return true
    },
    back() {
      this.$router.push('/devices/customPolicy')
    }
  }
}
</script>

<style scoped>

</style>