longdianningxing/acs2/nladmin-ui/src/views/acs/history/udwData/index.vue

<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-form
          :inline="true"
          class="demo-form-inline"
          label-position="right"
          label-suffix=":"
        >
          <el-form-item :label="$t('TaskRecord.table.Value')">
            <el-select
              v-model="form.unified_key"
              :placeholder="$t('TaskRecord.table.Value')"
              class="filter-item"
              clearable
              filterable
              size="small"
              @change="crud.toQuery"
            >
              <el-option v-for="(item,index) in unified_key" :key="index" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('TaskRecord.table.Numbering')">
            <el-input
              v-model="query.code"
              size="small"
              clearable
              :placeholder="$t('TaskRecord.table.Numbering')"
              style="width: 200px;"
              class="filter-item"
              @keyup.enter.native="crud.toQuery"
            />
          </el-form-item>
          <rrOperation />
        </el-form>
      </div>
      <!--如果想在工具栏加入更多按钮，可以使用插槽方式， slot = 'left' or 'right'-->
      <crudOperation :permission="permission" />
      <!--表单组件-->
      <el-dialog
        :close-on-click-modal="false"
        :before-close="crud.cancelCU"
        :visible.sync="crud.status.cu"
        :title="crud.status.title"
        width="500px"
      >
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
          <el-form-item :label="$t('TaskRecord.table.unified_key')">
            <el-input v-model="form.unified_key" style="width: 370px;" />
          </el-form-item>
          <el-form-item :label="$t('TaskRecord.table.Numbering')">
            <el-input v-model="form.key" style="width: 370px;" />
          </el-form-item>
          <el-form-item label="$t('TaskRecord.table.Numbering')">
            <el-input v-model="form.value" style="width: 370px;" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="text" @click="crud.cancelCU">{{ $t('task.select.Cancel') }}</el-button>
          <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">{{ $t('task.select.Confirm') }}</el-button>
        </div>
      </el-dialog>
      <!--表格渲染-->
      <el-table
        ref="table"
        v-loading="crud.loading"
        :data="crud.data"
        size="small"
        style="width: 100%;"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column prop="unified_key" :label="$t('TaskRecord.table.unified_key')" />
        <el-table-column prop="key" :label="$t('TaskRecord.table.Numbering')" />
        <el-table-column prop="value" :label="$t('TaskRecord.table.Numbering')" />
        <el-table-column
          v-permission="['admin','instruction:edit','instruction:del']"
          fixed="left"
          :label="$t('task.select.Operation')"
          width="150px"
          align="center"
        >
          <!-- <template slot-scope="scope">
            <el-button slot="right" size="mini" style="margin-left: -1px;margin-right: 2px" type="text" @click="dialogFormVisible = true">
              查询历史
            </el-button>
          </template> -->
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <pagination />
      <!--弹窗设置设备与图标绑定与角度-->
      <el-dialog title="历史" :visible.sync="dialogFormVisible" width="35%">
        <el-form :model="form" size="small">
          <el-form-item :label="$t('TaskRecord.table.unified_key')" prop="unified_key" label-width="100px">
            <el-input v-model="form.unified_key" :disabled="true" />
          </el-form-item>

          <el-form-item label="code" prop="key" label-width="100px">
            <el-input v-model="form.key" :disabled="true" />
          </el-form-item>

        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import pagination from '@crud/Pagination'
import crudUdwData from '@/api/acs/history/udwData'
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import rrOperation from '@crud/RR.operation'
import { getDicts } from '@/api/system/dict'

const defaultForm = {
  unified_key: '',
  key: null,
  value: null,
  last_modify_date: null
}
export default {
  dicts: [],
  name: 'UdwData',
  components: { pagination, crudOperation, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({
      title: '数据源',
      url: 'api/udw/',
      idField: 'key',
      sort: 'key',
      query: {},
      crudMethod: { ...crudUdwData },
      optShow: {
      }
    })
  },
  data() {
    return {
      unified_key: [
        {
          value: '1',
          label: 'opc_value'
        },
        {
          value: '2',
          label: 'cached'
        },
        {
          value: '3',
          label: 'socket'
        }
      ],
      permission: {
      },
      dialogFormVisible: false,
      rules: {
      },
      form: {
        unified_key: '',
        key: null,
        value: null,
        last_modify_date: null
      }
    }
  },
  created() {
    getDicts().then(data => {
      this.dicts = data
    })
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      return true
    }
  }
}
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}

.el-icon-arrow-down {
  font-size: 12px;
}
</style>