huaxing-ui/src/views/wcs/configuration/index.vue

<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item
        label="名称"
        prop="equipmentName"
      >
        <el-input
          v-model="queryParams.equipmentName"
          placeholder="请输入名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置</el-button>
      </el-form-item>
    </el-form>

    <!--    <el-table v-loading="loading" :data="systemConfigurationList">-->
    <!--      <el-table-column label="名称" align="center"   prop="equipmentName" />-->
    <!--      <el-table-column label="上线状态" align="center" prop="onlineStatus" />-->
    <!--      <el-table-column label="设备状态" align="center" prop="equipmentStatus" />-->
    <!--      <el-table-column label="通信状态" align="center" prop="communicationStatus" />-->
    <!--      <el-table-column label="创建时间" align="center" prop="createTime"/>-->
    <!--      <el-table-column label="修改时间" align="center" prop="updateTime"/>-->
    <!--      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
    <!--        <template slot-scope="scope">-->
    <!--          <el-button-->
    <!--            size="mini"-->
    <!--            type="text"-->
    <!--            icon="el-icon-edit"-->
    <!--            @click="handleUpdate(scope.row)"-->
    <!--            v-hasPermi="['wcs:configuration:edit']"-->
    <!--          >修改</el-button>-->
    <!--        </template>-->
    <!--      </el-table-column>-->
    <!--    </el-table>-->

    <div class="layout-full">
      <heavy-table
        :data="systemConfigurationList"
        :loading="loading"
        :paging="paging"
        :config="tableConfig"
        :tableProps="tableProps"
        @current-change="getList"
        @handleUpdate="handleUpdate"
        @handleCutOff="handleCutOff"
        @handleCutIn="handleCutIn"
      >
      </heavy-table>
    </div>

    <!-- 添加或修改区域对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="500px"
      append-to-body
    >
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        style="width: 380px;"
        label-width="80px"
      >
        <el-form-item
          label="名称"
          prop="equipmentName"
        >
          <el-input
            v-model="form.equipmentName"
            placeholder="请输入名称"
          />
        </el-form-item>
        <el-form-item
          label="上线状态"
          prop="onlineStatus"
          v-if="form.id === '1'"
        >
          <el-select
            v-model="form.onlineStatus"
            placeholder="上线状态"
            style="width: 300px;"
            clearable
          >
            <el-option
              label="未上线"
              value="0"
            />
            <el-option
              label="已上线"
              value="1"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="设备状态"
          prop="equipmentStatus"
        >
          <el-select
            v-model="form.equipmentStatus"
            placeholder="设备状态"
            style="width: 300px;"
            clearable
          >
            <el-option
              label="初始状态"
              value="0"
            />
            <el-option
              label="手动状态"
              value="1"
            />
            <el-option
              label="自动状态"
              value="2"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { systemConfigurationList, updateStemConfiguration, handleCutOff, handleCutIn } from '@/api/wcs/configuration'

export default {
  name: 'Configuration',
  data() {
    return {
      paging: {
        page: 1, // 当前页
        size: 10, // 页面大小
        total: 0
      },
      tableConfig: [
        // {
        //   label: "名称",
        //   prop: "equipmentName",
        //   istrue: true,
        // },
        {
          label: '名称',
          prop: 'devName',
          istrue: true
        },
        {
          label: '上线状态',
          prop: 'onlineStatus',
          istrue: true,
          filter(row, value) {
            if (row.id === '1') {
              if (row.onlineStatus === '0') {
                return '未上线'
              } else if (row.onlineStatus === '1') {
                return '已上线'
              }
            } else {
              return '--'
            }
          }
        },
        {
          label: '设备状态',
          prop: 'equipmentStatus',
          istrue: true,
          filter(row, value) {
            if (row.equipmentStatus === '0') {
              return '初始状态'
            } else if (row.equipmentStatus === '1') {
              return '手动状态'
            } else if (row.equipmentStatus === '2') {
              return '自动状态'
            } else {
              return '--'
            }
          }
        },
        // {
        //   label: "通信状态",
        //   prop: "communicationStatus",
        //   istrue: true,
        //   filter(row, value) {
        //     if(row.communicationStatus === "0"){
        //       return "未连接";
        //     }else if(row.communicationStatus === "1"){
        //       return "已连接";
        //     }
        //   },
        //
        // },
        {
          label: '创建时间',
          prop: 'createTime',
          istrue: true
        },
        {
          label: '修改时间',
          prop: 'updateTime',
          istrue: true
        },
        {
          label: '操作',
          prop: 'operating',
          istrue: true,
          type: 'button',
          width: 100,
          fixed: 'right',
          buttons: [
            {
              name: '修改',
              event: 'handleUpdate',
              hidden(value) {
                if (value.equipmentName === 'WCS') {
                  return false
                } else {
                  return true
                }
              }
            },
            {
              name: '切离',
              event: 'handleCutOff',
              hidden(value) {
                if (value.equipmentStatus === '2' && value.equipmentName != 'WCS') {
                  return false
                } else {
                  return true
                }
              }
            },
            {
              name: '恢复',
              event: 'handleCutIn',
              hidden(value) {
                if (value.equipmentStatus === '1' && value.equipmentName != 'WCS') {
                  return false
                } else {
                  return true
                }
              }
            }
          ]
        }
      ],
      tableProps: {
        'max-height': 700
      },

      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 区域表格数据
      systemConfigurationList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        equipmentName: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        equipmentName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
        equipmentStatus: [{ required: true, trigger: 'change', message: '请选择设备状态' }],
        onlineStatus: [{ required: true, trigger: 'change', message: '请选择上线状态' }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /** 查询区域列表 */
    getList() {
      this.loading = true
      systemConfigurationList(this.queryParams).then((response) => {
        this.systemConfigurationList = response.rows
        this.paging.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        equipmentName: null,
        equipmentStatus: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      let tempRow = JSON.parse(JSON.stringify(row))
      this.reset()
      let data = {
        id: tempRow.id,
        equipmentName: tempRow.equipmentName,
        equipmentStatus: tempRow.equipmentStatus,
        onlineStatus: tempRow.onlineStatus
      }
      this.form = data
      this.open = true
      this.title = '修改区域'
    },
    /** 切离按钮操作 */
    handleCutOff(row) {
      let tempRow = JSON.parse(JSON.stringify(row))
      let data = {
        id: tempRow.id,
        equipmentName: tempRow.equipmentName,
        equipmentStatus: tempRow.equipmentStatus,
        onlineStatus: tempRow.onlineStatus
      }
      handleCutOff(data)
        .then((response) => {
          this.$modal.msgSuccess('切离成功')
          this.getList()
        })
        .catch(() => {
          this.$modal.msgSuccess('切离失败，正在工作中或有异常')
        })
    },
    /** 恢复按钮操作 */
    handleCutIn(row) {
      let tempRow = JSON.parse(JSON.stringify(row))
      let data = {
        id: tempRow.id,
        equipmentName: tempRow.equipmentName,
        equipmentStatus: tempRow.equipmentStatus,
        onlineStatus: tempRow.onlineStatus
      }
      handleCutIn(data)
        .then((response) => {
          this.$modal.msgSuccess('切离成功')
          this.getList()
        })
        .catch(() => {
          this.$modal.msgSuccess('切离失败，正在工作中或有异常')
        })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          updateStemConfiguration(this.form).then((response) => {
            this.$modal.msgSuccess('修改成功')
            this.open = false
            this.getList()
          })
        }
      })
    }
  }
}
</script>