<template> 
 | 
  <TableLayout v-permissions="['ext:routecardext:query']"> 
 | 
    <!-- 搜索表单 --> 
 | 
    <el-form ref="searchForm" slot="search-form" :model="searchForm" label-suffix=":" label-width="100px" inline> 
 | 
      <el-form-item label="所属工厂" prop="departId"> 
 | 
        <el-select v-model="searchForm.departId" placeholder="请选择工厂" clearable filterable @change="selectFactoey"> 
 | 
          <el-option 
 | 
            v-for="item in factories" 
 | 
            :key="item.id" 
 | 
            :label="item.name" 
 | 
            :value="item.id" 
 | 
          ></el-option> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="产品信息" prop="bmodelBomId"> 
 | 
        <el-select 
 | 
          v-model="searchForm.bmodelBomId" 
 | 
          clearable 
 | 
          filterable 
 | 
          :disabled="searchForm.departId.length==0" 
 | 
          placeholder="请选择产品" 
 | 
          @change="selectMaterial" 
 | 
        > 
 | 
          <el-option 
 | 
            v-for="item in materials" 
 | 
            :key="item.id" 
 | 
            :label="item.mmodel.name" 
 | 
            :value="item.id" 
 | 
            clearable 
 | 
            filterable 
 | 
          ></el-option> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <el-form-item label="工序" prop="rmodelProcedureId"> 
 | 
        <el-select 
 | 
          v-model="searchForm.rmodelProcedureId" 
 | 
          clearable 
 | 
          filterable 
 | 
          :disabled="searchForm.bmodelBomId.length==0" 
 | 
          placeholder="请选择工序" 
 | 
        > 
 | 
          <el-option 
 | 
            v-for="item in productes" 
 | 
            :key="item.id" 
 | 
            :label="item.name" 
 | 
            :value="item.dmodelRouteProductId" 
 | 
          ></el-option> 
 | 
        </el-select> 
 | 
      </el-form-item> 
 | 
      <section> 
 | 
        <el-button type="primary" @click="search">搜索</el-button> 
 | 
        <el-button @click="reset">重置</el-button> 
 | 
      </section> 
 | 
    </el-form> 
 | 
    <!-- 表格和分页 --> 
 | 
    <template v-slot:table-wrap> 
 | 
      <ul class="toolbar" v-permissions="['ext:routecardext:create', 'ext:routecardext:importExcel']"> 
 | 
        <li><el-button type="primary" @click="$refs.operaRouteCardExtWindow.open('新建工艺卡管理')" v-permissions="['ext:routecardext:create']">新建</el-button></li> 
 | 
        <li v-permissions="['ext:routecardext:importExcel']"> 
 | 
          <ImportButton 
 | 
            text="导入" 
 | 
            template-name="route_card_import_template.xlsx" 
 | 
            template-path="/template/route_card_import_template.xlsx" 
 | 
            action="/ext/routeCardExt/importExcel" 
 | 
            @success="search" 
 | 
          /> 
 | 
        </li> 
 | 
        <!-- v-permissions="['ext:routecardext:importExcel']" --> 
 | 
      </ul> 
 | 
      <el-table 
 | 
        v-loading="isWorking.search" 
 | 
        :data="tableData.list" 
 | 
        stripe 
 | 
        border 
 | 
        @selection-change="handleSelectionChange" 
 | 
      > 
 | 
        <!-- <el-table-column type="selection" width="55"></el-table-column> --> 
 | 
        <el-table-column prop="mmodel.name" fixed="left" label="产品名称" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="mmodel.code" label="物料编码" min-width="160px"></el-table-column> 
 | 
        <el-table-column prop="factoryName" label="工厂" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="procedureName" label="工序" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="procedureCode" label="工序编码" min-width="100px"></el-table-column> 
 | 
        <el-table-column prop="rmodel.procedureId" label="工艺卡" min-width="100px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            <el-button v-if="row.fileurl" type="text" @click="showCard(row)">点击查看</el-button> 
 | 
            <span v-else>-</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column prop="tips" label="注意事项" min-width="140px" show-overflow-tooltip> 
 | 
          <template slot-scope="{row}"> 
 | 
            <span class="long-title-style">{{ row.tips }}</span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column prop="rmodel.procedureId" label="更新时间" min-width="140px"> 
 | 
          <template slot-scope="{row}"> 
 | 
            {{ row.updateTime ? row.updateTime : row.createTime }} 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
        <el-table-column 
 | 
          v-if="containPermissions(['ext:routecardext:update', 'ext:routecardext:delete'])" 
 | 
          label="操作" 
 | 
          min-width="120" 
 | 
          fixed="right" 
 | 
        > 
 | 
          <template slot-scope="{row}"> 
 | 
            <el-button type="text" @click="$refs.operaRouteCardExtWindow.open('编辑工艺卡', row)" v-permissions="['ext:routecardext:update']">编辑</el-button> 
 | 
            <span v-permissions="['ext:routecardext:delete']" style="margin-left:8px"> 
 | 
              <el-button type="text" @click="deleteById(row)">删除</el-button> 
 | 
            </span> 
 | 
          </template> 
 | 
        </el-table-column> 
 | 
      </el-table> 
 | 
      <pagination 
 | 
        @size-change="handleSizeChange" 
 | 
        @current-change="handlePageChange" 
 | 
        :pagination="tableData.pagination" 
 | 
      > 
 | 
      </pagination> 
 | 
    </template> 
 | 
    <!-- 新建/修改 --> 
 | 
    <OperaRouteCardExtWindow ref="operaRouteCardExtWindow" @success="handlePageChange"/> 
 | 
  </TableLayout> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseTable from '@/components/base/BaseTable' 
 | 
import TableLayout from '@/layouts/TableLayout' 
 | 
import Pagination from '@/components/common/Pagination' 
 | 
import ImportButton from '@/components/common/ImportButton' 
 | 
import OperaRouteCardExtWindow from '@/components/ext/OperaRouteCardExtWindow' 
 | 
import { getBomMaterialList } from '@/api/ext/bomExt' 
 | 
import { getDepartmentListByConditon } from '@/api/ext/departmentExt' 
 | 
import { routeExt as proceList } from '@/api/ext/routeProcedureExt' 
 | 
import { queryListByCode } from '@/api/system/dictData' 
 | 
export default { 
 | 
  name: 'RouteCardExt', 
 | 
  extends: BaseTable, 
 | 
  components: { TableLayout, Pagination, OperaRouteCardExtWindow, ImportButton }, 
 | 
  data () { 
 | 
    return { 
 | 
      // 搜索 
 | 
      searchForm: { 
 | 
        departId: '', 
 | 
        rmodelProcedureId: '', 
 | 
        bmodelBomId: '' 
 | 
      }, 
 | 
      uploadParam: { 
 | 
        folder: 'USER_IMG' 
 | 
      }, 
 | 
      factories: [], 
 | 
      materials: [], 
 | 
      productes: [], 
 | 
    } 
 | 
  }, 
 | 
  provide() { 
 | 
    return { 
 | 
      folder: () => this.uploadParam.folder 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      module: '工艺卡', 
 | 
      api: '/ext/routeCardExt', 
 | 
      'field.id': 'id', 
 | 
      'field.main': 'mmodel.name' 
 | 
    }) 
 | 
    queryListByCode('?dicCode=FOLDER&label=ROUTE_CARD') 
 | 
      .then(res => { 
 | 
        // console.log(res) 
 | 
        this.uploadParam.folder = res[0].code 
 | 
      }) 
 | 
      .catch(err => { 
 | 
        console.log(err) 
 | 
      }) 
 | 
    this.getFactories() 
 | 
    this.search() 
 | 
  }, 
 | 
  methods: { 
 | 
    deleteById (row, childConfirm = true) { 
 | 
      this.__checkApi() 
 | 
      let message = `确认删除该工艺卡吗?` 
 | 
      this.$dialog.deleteConfirm(message) 
 | 
        .then(() => { 
 | 
          this.isWorking.delete = true 
 | 
          this.api.deleteById(row[this.configData['field.id']]) 
 | 
            .then(() => { 
 | 
              this.__afterDelete() 
 | 
            }) 
 | 
            .catch(e => { 
 | 
              this.$tip.apiFailed(e) 
 | 
            }) 
 | 
            .finally(() => { 
 | 
              this.isWorking.delete = false 
 | 
            }) 
 | 
        }) 
 | 
        .catch(() => {}) 
 | 
    }, 
 | 
    getFactories () { 
 | 
      getDepartmentListByConditon({ 
 | 
        type: 1 
 | 
      }) 
 | 
        .then(res => { 
 | 
          // console.log(res) 
 | 
          this.factories = res 
 | 
          this.selectFactoey(this.form.departId, isEdit) 
 | 
        }) 
 | 
        .catch(err => { 
 | 
          console.log(err) 
 | 
        }) 
 | 
    }, 
 | 
    selectFactoey (v) { 
 | 
      this.materials = [] 
 | 
      this.productes = [] 
 | 
      this.searchForm.bmodelBomId = '' 
 | 
      this.searchForm.rmodelProcedureId = '' 
 | 
      // console.log(v) 
 | 
      getBomMaterialList({ departId: v }) 
 | 
        .then(res => { 
 | 
          // console.log(res) 
 | 
          this.materials = res 
 | 
          if (isEdit) { 
 | 
            this.selectMaterial(this.form.bomId, isEdit) 
 | 
          } 
 | 
        }) 
 | 
        .catch(err => { 
 | 
          console.log(err) 
 | 
        }) 
 | 
    }, 
 | 
    selectMaterial (id) { 
 | 
      this.productes = [] 
 | 
      this.searchForm.rmodelProcedureId = '' 
 | 
      let routeId; 
 | 
      for (const item of this.materials) { 
 | 
        if (item.id === id) { 
 | 
          routeId = item.routeId 
 | 
        } 
 | 
      } 
 | 
      proceList(routeId) 
 | 
        .then(res => { 
 | 
          // console.log(res) 
 | 
          this.productes = res.proceList 
 | 
        }).catch(err => { 
 | 
          console.log(err) 
 | 
        }) 
 | 
    }, 
 | 
    showCard (row) { 
 | 
      // console.log(row.resourcePath + this.uploadParam.folder + '/' + row.fileurl) 
 | 
      window.location.href = row.resourcePath + this.uploadParam.folder + '/' + row.fileurl 
 | 
      // let myWindow = window.open( 
 | 
      //   row.resourcePath + this.uploadParam.folder + '/' + row.fileurl, 
 | 
      //   "002", 
 | 
      //   "left=0,top=150,width=600,height=700" 
 | 
      // ); 
 | 
      // myWindow; 
 | 
  
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 |