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: "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 true;
                } else {
                  return false;
                }
              },
            },{
              name: "切离",
              event: "handleCutOff",
              hidden(value) {
                if (value.equipmentName === "WCS" && value.equipmentStatus === 2) {
                  return true;
                } else {
                  return false;
                }
              },
            },{
              name: "恢复",
              event: "handleCutIn",
              hidden(value) {
                if (value.equipmentName === "WCS" && value.equipmentStatus === 1) {
                  return true;
                } else {
                  return false;
                }
              },
            },
          ],
        },
      ],
      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>