<template>
  <div class="app-container">
    <el-card class="box-card">
    
          
      <el-table
        :data="operationList.results"
        border
        fit
        stripe
        style="width: 100%"
        max-height="670"
         highlight-current-row
        v-el-height-adaptive-table="{bottomOffset: 50}"
      >
        <el-table-column type="index" width="50" />

        <el-table-column label="子工序工序">
          <template slot-scope="scope">{{ scope.row.step_.name }}</template>
        </el-table-column>
        <el-table-column label="是否提交">
          <template slot-scope="scope">
            <el-span v-if="scope.row.is_submited">是</el-span>
            <el-span v-else>否</el-span></template
          >
        </el-table-column>
        <el-table-column label="创建人">
          <template slot-scope="scope">{{
            scope.row.create_by_.username
          }}</template>
        </el-table-column>
        <el-table-column label="是否使用边角料">
          <template slot-scope="scope">
            <el-span v-if="scope.row.use_scrap">是</el-span>
            <el-span v-else>否</el-span></template
          >
        </el-table-column>

        <el-table-column label="过程记录表">
          
          <template slot-scope="scope" v-if="scope.row.record_">
            <el-tag v-for="item in scope.row.record_"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">{{item.name}}</el-tag>
          </template>
      
         
        </el-table-column>
        <el-table-column label="产品数量">
           <template slot-scope="scope" v-if="scope.row.wproduct_">
             {{ scope.row.wproduct_.length }}
           
       </template>
        </el-table-column>
        <el-table-column label="生产设备">
           <template slot-scope="scope" v-if="scope.row.equip_">
             
            <el-tag v-for="item in scope.row.equip_"
                    :key="item.id"
                    :label="item.number"
                    :value="item.id">{{item.number}}</el-tag>
        </template>
        </el-table-column>

        <el-table-column label="创建时间">
          <template slot-scope="scope">{{ scope.row.create_time }}</template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="100px">
           <template slot-scope="scope">
            <el-link
              v-if="checkPermission(['warehouse_update'])"
              @click="handleoperation(scope)"
              >前往操作</el-link>
           
            <el-link
              v-if="checkPermission(['warehouse_update'])"
              @click="handleDelete(scope)"
              >删除</el-link>
            
          </template>

        </el-table-column>
      </el-table>
      <pagination
        v-show="operationList.count > 0"
        :total="operationList.count"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.page_size"
        @pagination="getList"
      />
    </el-card>
  </div>
</template>
  <script>
import { getoperationList, deleteOperation } from "@/api/wpm";
import checkPermission from "@/utils/permission";

import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

export default {
  components: { Pagination },
  data() {
    return {
      operationList: {
        count: 0,
      },
      listQuery: {
        page: 1,
        page_size: 20,
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.id = this.$route.params.id;
    this.getList();
  },
  methods: {
    checkPermission,
    //订单列表
    getList() {
      getoperationList(this.listQuery).then((response) => {
        if (response.data) {
          this.operationList = response.data;
        }
        this.listLoading = false;
      });
    },
handleoperation(scope)
{
       this.$router.push({name: "operationdo", params: { id: scope.row.id }, })
},

    //操作记录删除
    handleDelete(scope) {
      this.$confirm("确认该操作删除?", "警告", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(async () => {
          await deleteOperation(scope.row.id);
          this.getList();
          this.$message.success("成功");
        })
        .catch((err) => {
          console.error(err);
        });
    },

  },
};
</script>