spc/src/views/spc-basic/processDefine.vue

<template>
  <el-card shadow="never" class="aui-card--fill">
    <query-form
      :page-name="'工序定义'"
      :data-form="dataForm"
      @getDataList="getDataList"
      @addOrUpdateHandle="addOrUpdateHandle"
      @exportHandle="exportHandle"
    />
    <el-table
      :data="dataList"
      :stripe="true"
      :header-cell-style="{
        background: '#eef1f6',
        color: '#606266',
        height: '56px'
      }"
      v-loading="dataListLoading"
      style="width: 100%;"
    >
      <el-table-column
        type="index"
        header-align="center"
        align="center"
        label="序号"
        width="50"
      >
      </el-table-column>
      <el-table-column prop="name" align="center" label="名称"> </el-table-column>
      <el-table-column prop="code" align="center" label="编码"> </el-table-column>
      <el-table-column prop="workingProcedureTypeName" align="center" label="类型"> </el-table-column>
      <el-table-column prop="machineName" align="center" label="机台">
        <template slot-scope="scope">
          <span>{{ scope.row.machineName}}</span>
        </template>
         </el-table-column>
      <el-table-column
        type="status"
        header-align="center"
        align="center"
        label="状态"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 0 ? 'danger' : 'success'">{{
            scope.row.status === 0 ? "不可用" : "可用"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="200"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="addOrUpdateHandle(scope.row.id)"
          >
            <el-tooltip
              class="item"
              effect="dark"
              content="修改"
              placement="top"
            >
            <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-编辑"></use></svg>
            </el-tooltip>
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="bindMachine(scope.row.id)"
          >
            <el-tooltip
              class="item"
              effect="dark"
              content="绑定机台"
              placement="top"
            >
            <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-进工业炉加工"></use></svg>
            </el-tooltip>
          </el-button>
          <el-popover placement="top" width="160" trigger="click" :ref="`popover-${scope.row.id}`">
            <p>确定要改变状态吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button type="text" size="mini" @click="cancel(scope.row.id)">取消</el-button>
              <el-button type="primary" size="mini" @click="changeStatus(scope.row.id)"
                >确定</el-button
              >
            </div>
            <el-button type="text" size="small" slot="reference">
              <el-tooltip class="item" effect="dark" content="改变状态" placement="top">
                <svg class="icon-svg aui-sidebar__menu-icon">
                  <use xlink:href="#转让状态"></use>
                </svg>
              </el-tooltip>
            </el-button>
          </el-popover>
          <el-button
            type="text"
            style="color:red"
            size="small"
            @click="deleteHandle(scope.row.id, scope.row.name)"
          >
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <svg class="icon-svg aui-sidebar__menu-icon"><use xlink:href="#icon-删除"></use></svg>
            </el-tooltip>
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateVisible"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
    <bind-machine
      v-if="bindMachineVisible"
      ref="bindMachineRef"
      @refreshDataList="getDataList"
    ></bind-machine>
  </el-card>
</template>

<script>
import AddOrUpdate from './components/processDefine-add'
import BindMachine from './components/processDefine-machine'
import basicPage from '@/mixins/basic-page'
import queryForm from './query-form'
export default {
  mixins: [basicPage],
  data() {
    return {
      urlOptions: {
        getDataListURL: '/basic/workingProcedure/page',
        deleteURL: '/basic/workingProcedure',
        statusUrl: '/basic/workingProcedure/status',
        exportUrl: '/basic/workingProcedure/export'
      },
      bindMachineVisible: false
    }
  },
  components: {
    AddOrUpdate,
    queryForm,
    BindMachine
  },
  methods: {
    bindMachine (id) {
      this.bindMachineVisible = true
      this.$nextTick(() => {
        this.$refs.bindMachineRef.init(id)
      })
    },
  }
}
</script>