<template> 
 | 
  <GlobalWindow 
 | 
    :title="title" 
 | 
    width="1100px" 
 | 
    :visible.sync="visible" 
 | 
    :confirm-working="isWorking" 
 | 
    @confirm="confirm" 
 | 
  > 
 | 
    <div> 
 | 
      <el-form :model="form" ref="form" label-width="100px" label-suffix=":" inline> 
 | 
        <div class="property-title">物料信息</div> 
 | 
        <el-form-item label="物料编码" prop="code" class="count-style" > 
 | 
          {{ form.code }} 
 | 
        </el-form-item> 
 | 
        <el-form-item label="物料组合名称" prop="name" class="count-style"> 
 | 
          <span style="max-width: 130px;" class="long-title-style" :title="form.name">{{ form.name }}</span> 
 | 
        </el-form-item> 
 | 
        <el-form-item label="单位" prop="umodelName" class="count-style"> 
 | 
          {{ form.umodelName }} 
 | 
        </el-form-item> 
 | 
         <el-form-item label="物料分类" prop="unionCategoryName" class="count-style"> 
 | 
          <span style="max-width: 130px;" class="long-title-style" :title="form.unionCategoryName">{{ form.unionCategoryName }}</span> 
 | 
        </el-form-item> 
 | 
         <el-form-item label="形成方式" prop="formation" class="count-style"> 
 | 
          {{ form.formation == 0 ? '生产' : '采购' }} 
 | 
        </el-form-item> 
 | 
        <el-form-item label="状态" prop="status" class="count-style"> 
 | 
          {{ form.status == '1' ? '有效' : '失效' }} 
 | 
          <!-- <el-tag></el-tag> --> 
 | 
        </el-form-item> 
 | 
      </el-form> 
 | 
    </div> 
 | 
    <!-- 表格和分页 --> 
 | 
    <el-tabs v-model="activeName"> 
 | 
      <el-tab-pane label="子组织" name="first"></el-tab-pane> 
 | 
    </el-tabs> 
 | 
    <!-- {{ form.mdlist }} --> 
 | 
    <el-table 
 | 
      v-loading="isWorking.search" 
 | 
      :data="form.mdlist" 
 | 
      border 
 | 
      stripe 
 | 
    > 
 | 
      <el-table-column prop="dmodelName" label="子组织" align="center" min-width="100px"></el-table-column> 
 | 
      <el-table-column 
 | 
        label="状态" 
 | 
        min-width="100" 
 | 
        align="center" 
 | 
      > 
 | 
        <template slot-scope="{row}"> 
 | 
          <!-- {{ row.status }} --> 
 | 
          <el-tag v-if="row.status == '有效'" type="success">有效</el-tag> 
 | 
          <el-tag v-if="row.status == '无效'" type="danger">失效</el-tag> 
 | 
          <!-- <span v-if="row.status == 1" class="valid-style">有效</span> 
 | 
          <span v-if="row.status == 0" class="unvalid-style">失效</span> --> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
      <el-table-column prop="createTime" label="分配时间" align="center" min-width="140px"></el-table-column> 
 | 
      <el-table-column 
 | 
        label="操作" 
 | 
        min-width="120" 
 | 
        align="center" 
 | 
        fixed="right" 
 | 
      > 
 | 
        <template slot-scope="scope"> 
 | 
          <span v-if="scope.row.status == '有效'" class="unvalid-style" @click="unvalid(scope)">失效</span> 
 | 
          <span v-if="scope.row.status == '无效'" >-</span> 
 | 
        </template> 
 | 
      </el-table-column> 
 | 
    </el-table> 
 | 
    <div slot="footer" class="window__header"> 
 | 
      <el-button type="primary" @click="cancel">返回</el-button> 
 | 
    </div> 
 | 
  </GlobalWindow> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
import BaseOpera from '@/components/base/BaseOpera' 
 | 
import GlobalWindow from '@/components/common/GlobalWindow' 
 | 
import { updateChildMateriaStatus } from '@/api/ext/materialExt' 
 | 
export default { 
 | 
  name: 'OperaMaterialDetailWindow', 
 | 
  extends: BaseOpera, 
 | 
  components: { GlobalWindow }, 
 | 
  data () { 
 | 
    return { 
 | 
      // 表单数据 
 | 
      form: { 
 | 
        code: 'WL0001', 
 | 
        name: '电解液2.0', 
 | 
        umodelName: '个', 
 | 
        unionCategoryName: '锂电池-原材料-成品0000000000000', 
 | 
        formation: '生产', 
 | 
        status: '1', 
 | 
        mdlist: [ 
 | 
          { organizationName: 'A组织', status: '0', distributionTime: '2022-05-10 13:35:30' }, 
 | 
          { organizationName: 'B组织', status: '1', distributionTime: '2022-05-10 13:35:30' }, 
 | 
          { organizationName: 'C组织', status: '0', distributionTime: '2022-05-10 13:35:30' }, 
 | 
          { organizationName: 'D组织', status: '1', distributionTime: '2022-05-10 13:35:30' } 
 | 
        ] 
 | 
      }, 
 | 
      // 验证规则 
 | 
      rules: { 
 | 
      }, 
 | 
      activeName: 'first' 
 | 
    } 
 | 
  }, 
 | 
  created () { 
 | 
    this.config({ 
 | 
      api: '/ext/materialExt', 
 | 
      'field.id': 'id' 
 | 
    }) 
 | 
  }, 
 | 
  methods: { 
 | 
    unvalid (row) { 
 | 
      // console.log('失效', row) 
 | 
      const query = '?status=0&id=' + row.row.id 
 | 
      updateChildMateriaStatus(query) 
 | 
        .then(res => { 
 | 
          this.$message.success('成功') 
 | 
          this.form.mdlist[row.$index].status = '失效' 
 | 
        }) 
 | 
        .catch(err => { 
 | 
          console.log(err) 
 | 
          this.$message.error('失败') 
 | 
        }) 
 | 
    }, 
 | 
    cancel () { 
 | 
      this.$refs.form.resetFields() 
 | 
      this.visible = false 
 | 
      // let that = this 
 | 
    } 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss" scoped> 
 | 
.count-style { 
 | 
  display: inline-block; 
 | 
  width: 30%; 
 | 
  height: 30px; 
 | 
} 
 | 
  
 | 
</style> 
 |