BST_bigScreen/src/views/PurchasingManage/PurchasingOrder/edit.vue

<template>
  <div>
    <Toptitle :title="$route.query.type==1?'新增采购订单':$route.query.type==2?'查看采购单':'编辑采购单'">
      <slot name="titleButton">
        <Button @click="handleReference(1)"
                type="primary"
                v-show="!isCheck"
                ghost
                style="margin-right:10px;"
               >参照采购计划</Button>
        <Button @click="goBack"
                type="primary"
                ghost
                style="margin-right:10px;">返回</Button>
        <Button @click="postData"
                type="primary"
                v-show="!isCheck"
                ghost
                style="margin-right:10px;">确定</Button>
      </slot>
    </Toptitle>
    <div class="content_topform">
      <Form :label-width="120"
            :model="searchData">
             <FormItem label="订单号:" :label-width='80'>
          <Input type="text"
                 size="small"
                 v-show="!isCheck"
                 disabled
                 v-model="searchData.order_no"
                 style="width: 200px;margin-top:6px"
                 placeholder="自动生成订单号">
          </Input>
          <span v-show="isCheck">{{searchData.order_no}}</span>
        </FormItem>
        <!-- <FormItem label="项目名称:">
          <Input type="text"
                 size="small"
                 v-show="!isCheck"
                 v-model="searchData.residential_name"
                 style="width: 200px;margin-top:6px"
                 placeholder="项目名称">
          <span slot="append"
                style="cursor:pointer;"
                @click="showProjectModal=true">选择</span>
          </Input>
          <span v-show="isCheck">{{searchData.residential_name}}</span>
        </FormItem> -->
        <FormItem label="供应商名称:">
          <Input type="text"
                 size="small"
                 v-show="!isCheck"
                 v-model="searchData.supply_title"
                 style="width: 300px;margin-top:6px"
                 placeholder="供应商名称">
          <span slot="append"
                style="cursor:pointer;"
                @click="showSupplierModal=true">选择</span>
          </Input>
          <span v-show="isCheck">{{searchData.supply_title}}</span>
        </FormItem>
        <FormItem label="采购订单类型:" style="margin-left:100px">
          <Select v-model="searchData.basics_purchase_id"
                  size="small"
                  v-show="!isCheck"
                  clearable
                  filterable
                  label-in-value
                  style="width: 200px">
            <Option v-for="(sitem) in purchaseTypeList"
                    :key="sitem.id"
                    :label="sitem.title"
                    :value="sitem.id">
            </Option>
          </Select>
          <span v-show="isCheck">{{searchData.basics_purchase_title}}</span>
        </FormItem>
        <!-- <FormItem label="单据号:">
          <Input type="text"
                 size="small"
                 v-show="!isCheck"
                 readonly
                 v-model="searchData.purchase_order_no"
                 style="width: 200px"
                 placeholder="自动生成" />
          <span v-show="isCheck">{{searchData.purchase_order_no}}</span>
        </FormItem> -->
        <!-- <FormItem label="制单人:"
                  v-show="isCheck"> -->
          <!-- <Select v-model="searchData.nickname"
                  size="small"
                  v-show="!isCheck"
                  clearable
                  filterable
                  label-in-value
                  style="width: 200px">
            <Option v-for="(sitem) in usersList"
                    :key="sitem.nickname"
                    :label="sitem.nickname"
                    :value="sitem.nickname">
            </Option>
          </Select> -->
          <!-- <span>{{searchData.nickname}}</span>
        </FormItem> -->
        <FormItem label="单据日期:">
          <DatePicker type="date"
                      v-show="!isCheck"
                      size="small"
                      style="width: 200px"
                      placeholder="年/月/日"
                      v-model="searchData.order_time"></DatePicker>
          <span v-show="isCheck">{{searchData.order_time?func.replaceDate(searchData.order_time).split(' ')[0]:''}}</span>
        </FormItem>
        <FormItem label="预计到货日期:" style="margin-left:30px">
          <DatePicker type="date"
                      v-show="!isCheck"
                      size="small"
                      style="width: 200px"
                      placeholder="年/月/日"
                      v-model="searchData.arrive_time"></DatePicker>
          <span v-show="isCheck">{{searchData.arrive_time?func.replaceDate(searchData.arrive_time).split(' ')[0]:''}}</span>
        </FormItem>
        <FormItem label="备注:" :label-width='80'>
          <Input type="textarea"
                 v-show="!isCheck"
                 size="small"
                 v-model="searchData.remark"
                 style="width: 200px"
                 placeholder="备注" />
          <span v-show="isCheck">{{searchData.remark}}</span>
        </FormItem>
      </Form>
    </div>
    <div class="content_table">
      <div class="content_table_btn">
        <div style="display:flex;">
          <span style="width:200px">采购清单</span>
          <!-- <Button @click="showModal=true"
                  v-show="!isCheck"
                  type="primary"
                  size="small"
                  style="margin-left:10px;"
                  :disabled="$route.query.is_refer == 0?true:btn_disable">选择物料</Button> -->
          <div ><span>参照计划单号：</span><span v-for="(item,index) in plan_no" :key="index" style="margin-right:10px">{{item}}{{index+1==plan_no.length?'':','}}</span></div>
        </div>
        <div class="content_table_btn_right"
             v-show="!isCheck">
           <Dropdown trigger="click" style="margin-left: 20px" @on-click='DropDownSort' >
        <a href="javascript:void(0)">
            批量修改
            <Icon type="ios-arrow-down"></Icon>
        </a>
        <DropdownMenu slot="list" >
            <DropdownItem :name='2'>数量</DropdownItem>
            <DropdownItem :name='3'>税率</DropdownItem>
            <DropdownItem :name='1'>项目信息</DropdownItem>
        </DropdownMenu>
    </Dropdown>
        </div>
      </div>
      <Table :columns="tableColumns"
             border
             :data="tableData"
             :max-height='500'
              show-summary 
              :summary-method="handleSummary"
              @on-selection-change='selectRow' >
             <template slot="material_sort" slot-scope="{ row,index }">
           <span v-if="row.material_title == '选择物料'"></span>
          <div v-else>
            <span >{{ tableData[index].material_type }}</span></div>
        </template>
         <template slot="material_title" slot-scope="{ row,index }">
            <span
              
              v-show="!isCheck"
            
             style="cursor: pointer;color:#2d8cf0"
             @click="showModal = true"

            >
            {{tableData[index].material_title}}
            </span>
            <span v-show="isCheck">{{ row.material_title }}</span>
        </template>
<template slot="project_number" slot-scope="{row}">
  <span @click="check(row)" style="color: rgb(45, 140, 240);cursor: pointer;">{{row.project_number}}</span>
</template>
        <template slot="project_code" slot-scope="{ row,index }">
          <span v-if="row.material_title == '选择物料'"></span>
          <div v-else>
           <Select
              v-model="tableData[index].project_code"
              size="small"
              clearable
              transfer
              v-show="!isCheck&&row.project_number!=='查看'"
              @on-change='selectChange(row,index)'
              filterable
              label-in-value
            >
              <Option
                v-for="(sitem,index) in project_number"
                :key="index"
                :label="sitem"
                :value="sitem"
              >
              </Option>
            </Select>
            <span v-show="isCheck||row.project_number == '查看'" @click="check(row)" style="color: rgb(45, 140, 240);cursor: pointer;">{{row.project_number=='查看'?'查看':row.project_code}}</span>
            </div>
        </template>
        <template slot="project_title" slot-scope="{ row,index }">
           <span v-if="row.material_title == '选择物料'"></span>
          <div v-else>
           <Select
              v-model="tableData[index].project_title"
              size="small"
              clearable
              transfer
              @on-change='selectChange(row,index)'
              v-show="!isCheck&&row.project_number!=='查看'"
              filterable
              label-in-value
            >
              <Option
                v-for="(sitem,index) in project_name"
                :key="index"
                :label="sitem"
                :value="sitem"
              >
              </Option>
            </Select>
            <span v-show="isCheck||row.project_number == '查看'" @click="check(row)" style="color: rgb(45, 140, 240);cursor: pointer;">{{row.project_number=='查看'?'查看':row.project_title}}</span>
            </div>
        </template>
       <template slot="numberSet" slot-scope="{row , index }">
         <span v-if="row.material_title == '选择物料'"></span>
         <div v-else>
           <Tooltip
            placement="left"
            @on-popper-show="handleToolShow(index, row)"
          >
            <div slot="content">
              <div>
                <div v-for="(_item,_index) in warehouse" :key="_index">
                  {{_item.warehouse_title}}:{{_item.num}}
                </div>
              </div>
            </div>
            <Input
            
              v-show="!isCheck"
              size="small"
              v-model="tableData[index].num"
              placeholder="数量"
              @on-change="changenum($event,row,index)"
              :disabled="row.project_number == '查看'"
            >
            
            </Input>
            <span v-show="isCheck">{{ tableData[index].num }}</span>
            </Tooltip>
          </div>
        </template>
        <template slot="setSlot"
                  slot-scope="{row,index}">
          <span v-if="row.material_title == '选择物料'"></span>
          <div v-else>
                  <a style="margin:0 5px"
             v-show="!isCheck"
             :disabled="row.state==0"
              @click="handleSet(3,row,index)"
            >复制</a>
          <a style="margin:0 5px"
             v-show="!isCheck"
             :disabled="row.state==0"
             @click="handleSet(4,row,index)">删除</a>
           </div>  
        </template>
      </Table>
    </div>
    <Modal v-model="showModal"
           title="选择物料"
           width='80'
           @on-ok="handleSelect"
           @on-cancel="showModal=false">
      <div class="modal_content">
        <div class="modal_content_left">
          <Tree :data="modalData.treeData"
                children-key='list'
                style="width:100%;"
                @on-select-change="handleTreeSlect"
                class="demo-tree-render"></Tree>
        </div>
        <div class="modal_content_center">
          <div class="modal_content_center_top">
            <div><span>物料名称:</span>
              <Input type="text"
                     v-model="modalData.title"
                     placeholder="请输入物料名称" />
            </div>
            <Button @click="initModal()"
                    type="primary"
                    style="margin:0 10px;">搜索</Button>
          </div>
          <div class="modal_content_center_body">
            <Table :columns="modalTableColumns"
                   height="520"
                   border
                   ref="modelTable"
                   @on-select-all="handleSelectionAll"
                   @on-select-all-cancel="handleSelectionAllCancel"
                   @on-select="handleSelection"
                   @on-select-cancel="handleSelectionCancel"
                   :loading="modalTableLoading"
                   :data="modalData.tableData">
            </Table>
            <div class="modal_content_center_footer">
              <Page :page-size-opts="[10, 20, 30, 40,100]"
                    @on-page-size-change='changeModalSize'
                    @on-change='changeModalPage'
                    :current='modal_page_index'
                    show-total
                    :total="modal_total"
                    show-sizer
                    :page-size='modal_page_size' />
            </div>
          </div>
        </div>
        <div class="modal_content_right">
          <span>已选</span>
          <Table :columns="selectedColumns"
                 max-height="500"
                 border
                 :data="modalData.selectedData">
            <template slot="selectedSetSlot"
                      slot-scope="{row,index}">
              <a style="margin:0 5px;color:red"
                 @click="handleSelectedDele(row,index)">删除</a>
            </template>
          </Table>
        </div>
      </div>
    </Modal>
    <Modal v-model="showProjectModal"
           title="选择项目"
           width='80'
           @on-ok="handleProjectSelect"
           @on-cancel="showProjectModal=false">
      <div class="modal_content">
        <div class="modal_content_center">
          <div class="modal_content_center_top">
            <span>项目名称:</span>
            <Input type="text"
                   v-model="modalProjectData.title"
                   style="width:180px"
                   placeholder="请输入物料名称" />
            <Button @click="initProjectModal()"
                    type="primary"
                    style="margin:0 10px;">搜索</Button>
          </div>
          <div class="modal_content_center_body">
            <Table :columns="modalProjectTableColumns"
                   height="520"
                   border
                   :loading="modalProjectTableLoading"
                   :data="modalProjectData.tableData">
              <template slot="basicTypeSet"
                        slot-scope="{row}">
                <div>
                  <span v-for="item in warningList"
                        :key="item.id"
                        :style="{color:item.color}"
                        v-show="item.id==row.warning_state">{{item.title}}</span>
                </div>
              </template>
            </Table>
            <div class="modal_content_center_footer">
              <Page :page-size-opts="[10, 20, 30, 40,100]"
                    @on-page-size-change='changeProjectModalSize'
                    @on-change='changeProjectModalPage'
                    :current='modal_project_page_index'
                    show-total
                    :total="modal_project_total"
                    show-sizer
                    :page-size='modal_project_page_size' />
            </div>
          </div>
        </div>
      </div>
    </Modal>
    <Modal v-model="showSupplierModal"
           title="选择供应商"
           width='80'
           @on-ok="handleSupplierSelect"
           @on-cancel="showSupplierModal=false">
      <div class="modal_content">
        <div class="modal_content_left">
          <Tree :data="modalSupplierData.treeData"
                children-key='sub'
                style="width:100%;"
                @on-select-change="handleSupplierTreeSlect"
                class="demo-tree-render"></Tree>
        </div>
        <div class="modal_content_center">
          <div class="modal_content_center_top">
            <span>供应商名称:</span>
            <Input type="text"
                   v-model="modalSupplierData.title"
                   style="width:180px"
                   placeholder="请输入供应商名称" />
            <Button @click="initSupplierModal(modalSupplierData)"
                    type="primary"
                    style="margin:0 10px;">搜索</Button>
          </div>
          <div class="modal_content_center_body">
            <Table :columns="modalSupplierTableColumns"
                   height="520"
                   border
                   :loading="modalSupplierTableLoading"
                   :data="modalSupplierData.tableData">
            </Table>
            <div class="modal_content_center_footer">
              <Page :page-size-opts="[10, 20, 30, 40,100]"
                    @on-page-size-change='changeSupplierModalSize'
                    @on-change='changeSupplierModalPage'
                    :current='modal_supplier_page_index'
                    show-total
                    :total="modal_supplier_total"
                    show-sizer
                    :page-size='modal_supplier_page_size' />
            </div>
          </div>
        </div>
      </div>
    </Modal>
    <Modal 
    :width='400'
    v-model="showTotal"
    @on-ok='total_sure'
    :title="total_type==1?'批量修改项目信息':total_type==2?'批量修改数量':'批量修改税率'">
    <div style="text-align:center">
      <div v-if="total_type==1">
        <Form>
          <FormItem>
            <span>项目编码 : </span>
        <Select v-model="total_project_info.code" style="width:200px">
        <Option v-for="(item,index) in project_number" :value="item" :key="index">{{ item }}</Option>
    </Select>
          </FormItem>
             <FormItem>
          <span>项目名称 : </span>
        <Select v-model="total_project_info.name" style="width:200px">
        <Option v-for="(item,index) in project_name" :value="item" :key="index">{{ item }}</Option>
    </Select>
          </FormItem>
    </Form>
    </div>
    <div v-if="total_type==2">
      <span>数量 : </span><Input v-model="total_num" style="width:50%" type="number"/>
    </div>
    <div v-if="total_type == 3">
      <span>税率一键修改 : </span>
     <Input v-model="total_fax" style="width:50%" type="number"/>%
      </div>
      </div>
    </Modal>
    <Modal 
    :width='800'
    v-model="showCheck"
    title="查看">
      <span>物料名称:{{material_name}}</span>
      <Table 
      :columns="CheckTableColumns"
                   :max-height="520"
                   border
          :data='checkData'
          style='margin-top:10px'
                   >
      </Table>
    </Modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  name: '',
  components: {

  },
  props: {},
  // import引入的组件需要注入到对象中才能使用
  data () {
    // 这里存放数据
    return {
      delData:[],
      material_name:'',
      checkData:[],
      CheckTableColumns:[
        { title: '计划单号', key: 'plan_no', align: 'center', minWidth: 150},
        { title: '采购计划类型', key: 'plan_type_title', align: 'center', minWidth: 100},
        { title: '项目编码', key: 'project_code', align: 'center', minWidth: 150},
        { title: '项目名称', key: 'project_name', align: 'center', minWidth: 150},
         { title: '数量', key: 'purchases_num', align: 'center', minWidth: 100}
      ],
      showCheck:false,
      selectChoose:[],
      total_fax:0,
      project_name:[],
      project_number:[],
      total_num:'',
      total_project_info:{
          code:'',
          name:""
      },
      total_type:'',
      showTotal:false,
      btn_disable:false,
      fax_modify: '',
      searchData: {
       residential_name: ''
      },
      purchaseTypeList: [],
      modalProjectData: {
        title: '',
        tableData: [{}]
      },
      table_state:'',
      modalSupplierData: {
        title: '',
        code: '',
        treeData: [
          {
            title: '供应商分类',
            expand: true,
            sub: [],
            render: (h, { root, node, data }) => {
              return h('span', {
                style: {
                  display: 'inline-block',
                  width: '100%'
                }
              }, [
                h('span', [
                  h('Icon', {
                    props: {
                      type: 'ios-folder-outline'
                    },
                    style: {
                      marginRight: '8px'
                    }
                  }),
                  h('span', data.title)
                ]),
                h('span', {
                  style: {
                    display: 'inline-block',
                    // float: 'right',
                    marginRight: '32px'
                  }
                })
              ]);
            },
          }
        ],
        tableData: [{}]
      },
      tableColumns: [
        {key: 'select', align: 'center', minWidth: 80,type:'selection'},
        { title: '物料分类', key: 'type_title', align: 'center', minWidth: 140,slot:'material_sort'},
        { title: '物料名称', key: 'material_title', align: 'center', minWidth: 140 ,slot:'material_title'},
        {
          title: '物料规格', key: 'model', align: 'center', minWidth: 140,
          render: (h, params) => {
            const { row } = params
            let text = `${row.long ? row.long : 0}*${row.width ? row.width : 0}*${row.high ? row.high : 0}`
            if(row.material_title =='选择物料'){
              return h('span',{},'')
            }else{
               return h('span', {}, text)
            }
           
          }
        },
        { title: '计量单位', key: 'unit', align: 'center', minWidth: 100 },
        {
          title: '数量', key: 'num', align: 'center', minWidth: 120,slot:"numberSet"
          // render: (h, params) => {
          //   const { row, index } = params
          //   const currentRow = JSON.parse(JSON.stringify(this.tableData[index]))
          //   return this.isCheck ? h('span', {}, currentRow.num) : h('Input', {
          //     props: {
          //       value: currentRow.num,
          //       type: 'text'
          //     },
          //     on: {
          //       'on-change': (e) => {
          //         currentRow.num = e.target.value
          //         currentRow.total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
          //         currentRow.no_tax_amount = (1 * currentRow.no_tax_price * currentRow.num).toFixed(2)
          //         currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
          //         this.tableData.splice(index, 1, currentRow);
          //       }
          //     }
          //   })
          // }
        },
        {
          title: '无税单价', key: 'no_tax_price', align: 'center', minWidth: 120,
          render: (h, params) => {
            const { row, index } = params
            const currentRow = JSON.parse(JSON.stringify(this.tableData[index]))
            if(row.material_title==='选择物料'){
              return h('span',{},'')
            }else{
              return this.isCheck ? h('span', {}, currentRow.no_tax_price) : h('Input', {
              props: {
                value: currentRow.no_tax_price,
                type: 'text'
              },
              on: {
                'on-change': (e) => {
                  currentRow.no_tax_price = e.target.value
                  currentRow.no_tax_amount = (1 * currentRow.no_tax_price * currentRow.num).toFixed(2)
                  currentRow.price = (1 * currentRow.no_tax_price * (1 + 1 * currentRow.fax / 100)).toFixed(2)
                  currentRow.total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
                  currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                   if(!currentRow.copy&&!currentRow.edit){
        currentRow.change = true;
      }
                  // currentRow.total_price = (1 * currentRow.no_tax_amount + 1 * currentRow.tax_amount).toFixed(2)
                  this.tableData.splice(index, 1, currentRow);
                }
              }
            })
          }
            }
            
        },
        {
          title: '税率', key: 'fax', align: 'center', minWidth: 120,
          render: (h, params) => {
            const { row, index } = params
            const currentRow = this.tableData[index]
            if(row.material_title === '选择物料' ){
              return h('span',{},'')
            }else{
                return this.isCheck ? h('span', {}, currentRow.fax) : h('Input', {
              props: {
                value: currentRow.fax,
                type: 'text',
              },
              on: {
                'on-change': (e) => {
                  currentRow.fax = e.target.value
                  currentRow.price = (1 * currentRow.no_tax_price * (1 + 1 * currentRow.fax / 100)).toFixed(2)
                  currentRow.total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
                  currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                   if(!currentRow.copy&&!currentRow.edit){
        currentRow.change = true;
      }
                  this.tableData.splice(index, 1, currentRow);
                }
              }
            }, [h('span', { slot: 'append' }, '%')])
          }
            }
          
        },
        {
          title: '含税单价', key: 'price', align: 'center', minWidth: 120,
          render: (h, params) => {
            const { row, index } = params
            const currentRow = JSON.parse(JSON.stringify(this.tableData[index]))
              if(row.material_title === '选择物料' ){
              return h('span',{},'')
            }else{
            return this.isCheck ? h('span', {}, currentRow.price) : h('Input', {
              props: {
                value: currentRow.price,
                type: 'text'
              },
              on: {
                'on-change': (e) => {
                  currentRow.price = e.target.value
                  currentRow.no_tax_price = (1 * currentRow.price / (1 + 1 * currentRow.fax / 100)).toFixed(2)
                  currentRow.total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
                  currentRow.no_tax_amount = (1 * currentRow.no_tax_price * currentRow.num).toFixed(2)
                  currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                   if(!currentRow.copy&&!currentRow.edit){
        currentRow.change = true;
      }
                  this.tableData.splice(index, 1, currentRow);
                }
              }
            })
          }
          }
        },
        {
          title: '无税金额', key: 'no_tax_amount', align: 'center', minWidth: 120,
          render: (h, params) => {
            const { row, index } = params
            const currentRow = JSON.parse(JSON.stringify(this.tableData[index]))
              if(row.material_title === '选择物料' ){
              return h('span',{},'')
            }else{
            return this.isCheck ? h('span', {}, currentRow.no_tax_amount) : h('Input', {
              props: {
                value: currentRow.no_tax_amount,
                type: 'text'
              },
              on: {
                'on-change': (e) => {
                  currentRow.no_tax_amount = e.target.value
                  currentRow.no_tax_price = (1 * currentRow.no_tax_amount / 1*currentRow.num).toFixed(2)
                  currentRow.price = (1 * currentRow.no_tax_price * (1 + 1 * currentRow.fax / 100)).toFixed(2)
                  currentRow.total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
                  currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                   if(!currentRow.copy&&!currentRow.edit){
        currentRow.change = true;
      }
                  this.tableData.splice(index, 1, currentRow);
                }
              }
            })
          }
          }
        },
        {
          title: '税额', key: 'tax_amount', align: 'center', minWidth: 120,
          render: (h, params) => {
            const { row, index } = params
            const currentRow = JSON.parse(JSON.stringify(this.tableData[index]))
              if(row.material_title === '选择物料' ){
              return h('span',{},'')
            }else{
            return this.isCheck ? h('span', {}, currentRow.tax_amount) : h('Input', {
              props: {
                value: currentRow.tax_amount,
                type: 'text',
              },
              on: {
                'on-change': (e) => {
                  currentRow.tax_amount = e.target.value
                  // currentRow.fax = (1 * currentRow.tax_amount / currentRow.no_tax_price).toFixed(2)
                 currentRow.no_tax_amount = (1*(currentRow.total_price-currentRow.tax_amount)).toFixed(2)
                 currentRow.no_tax_price = (1*(currentRow.no_tax_amount/currentRow.num)).toFixed(2)
                  if(!currentRow.copy&&!currentRow.edit){
        currentRow.change = true;
      }
                  this.tableData.splice(index, 1, currentRow);
                }
              }
            })
          }
          }
        },
        {
          title: '价格合计', key: 'total_price', align: 'center', minWidth: 120,
          render: (h, params) => {
            const { row, index } = params
            const currentRow = JSON.parse(JSON.stringify(this.tableData[index]))
              if(row.material_title === '选择物料' ){
              return h('span',{},'')
            }else{
            return this.isCheck ? h('span', {}, currentRow.total_price) : h('Input', {
              props: {
                value: currentRow.total_price,
                type: 'text',
              },
              on: {
                'on-change': (e) => {
                  currentRow.total_price = e.target.value
                  currentRow.price = (1 * currentRow.total_price / currentRow.num).toFixed(2)
                  currentRow.no_tax_price = (1 * currentRow.price / (1 + 1 * currentRow.fax / 100)).toFixed(2)
                  currentRow.no_tax_amount = (1 * currentRow.no_tax_price * currentRow.num).toFixed(2)
                  currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                   if(!currentRow.copy&&!currentRow.edit){
        currentRow.change = true;
      }
                  this.tableData.splice(index, 1, currentRow);
                }
              }
            })
          }
          }
        },
         { title: '参照计划单号', key: 'project_number', align: 'center', minWidth: 100,slot:'project_number' },
          { title: '项目编码', key: 'project_code', align: 'center', minWidth: 100,slot: "project_code" },
           { title: '项目名称', key: 'project_title', align: 'center', minWidth: 100,slot: "project_title"  },
        { title: '操作', key: 'code', align: 'center', minWidth: 120, slot: 'setSlot' },
      ],
      tableData: [{material_title:'选择物料',_disabled:true}],
      showModal: false,
      showProjectModal: false,
      showSupplierModal: false,
      modalTableLoading: false,
      modalProjectTableLoading: false,
      modalSupplierTableLoading: false,
      modal_project_page_index: 1,
      modal_project_page_size: 10,
      modal_project_total: 0,
      modal_supplier_page_index: 1,
      modal_supplier_page_size: 10,
      modal_supplier_total: 0,
      currentChoose: {},
      warehouse:'',
      modalProjectTableColumns: [
        {
          title: '选择', key: '', align: 'center', minWidth: 60,
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChoose.id == id) {
              flag = true
            } else {
              flag = false
            }
            let self = this
            return h('div', [
              h('Radio', {
                props: {
                  value: flag
                },
                on: {
                  'on-change': () => {
                    self.currentChoose = params.row;
                  }
                }
              })
            ])
          }
        },
        { title: '项目名称', key: 'residential_name', align: 'center', minWidth: 100 },
        { title: '紧急程度', align: 'center', key: 'warning_state', minWidth: 80, slot: 'basicTypeSet', },
        {
          title: '创建时间', key: 'crt_time', align: 'center', minWidth: 110,
          render: (h, params) => {
            const { row } = params
            return h('span', {}, this.func.replaceDate(row.crt_time))
          }
        },
      ],
      modalSupplierTableColumns: [
        {
          title: '选择', key: '', align: 'center', minWidth: 60,
          render: (h, params) => {
            let id = params.row.id;
            let flag = false;
            if (this.currentChoose.id == id) {
              flag = true
            } else {
              flag = false
            }
            let self = this
            return h('div', [
              h('Radio', {
                props: {
                  value: flag
                },
                on: {
                  'on-change': () => {
                    self.currentChoose = params.row;
                  }
                }
              })
            ])
          }
        },
        { title: '供应商编码', key: 'code', align: 'center', minWidth: 100 },
        { title: '供应商名称', key: 'title', align: 'center', minWidth: 80, },
        { title: '负责人', key: 'contact', align: 'center', minWidth: 110, },
        { title: '联系方式', key: 'mobile', align: 'center', minWidth: 110, },
      ],
      modalData: {
        title: '',
        tableData: [{}],
        selectedData: [],
        treeData: [
          {
            title: '物料分类',
            expand: true,
            list: [],
            render: (h, { root, node, data }) => {
              return h('span', {
                style: {
                  display: 'inline-block',
                  width: '100%'
                }
              }, [
                h('span', [
                  h('Icon', {
                    props: {
                      type: 'ios-folder-outline'
                    },
                    style: {
                      marginRight: '8px'
                    }
                  }),
                  h('span', data.title)
                ]),
                h('span', {
                  style: {
                    display: 'inline-block',
                    // float: 'right',
                    marginRight: '32px'
                  }
                })
              ]);
            },
          }
        ],
      },
      selectedColumns: [
        { title: '物料名称', key: 'title', align: 'center', minWidth: 110 },
        { title: '操作', key: 'title', align: 'center', minWidth: 90, slot: 'selectedSetSlot' },
      ],
      modal_page_index: 1,
      modal_page_size: 10,
      modal_total: 0,
      modalTableColumns: [
        { title: '全选', type: 'selection', align: 'center', minWidth: 60 },
        { title: '物料名称', key: 'title', align: 'center', minWidth: 110 },
        { title: '物料规格', key: 'model', align: 'center', minWidth: 110 },
        { title: '计量单位', key: 'unit', align: 'center', minWidth: 110 },
      ],
      usersList: [],
      isCheck: false,
      warningList: [],
      purchase_data:[],
      purchase_tableData:[],
      plan_no:[],
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.$route.query.type == 2 ? this.isCheck = true : this.isCheck = false
    // 获取操作员
    this.axios('/api/user').then(res => this.usersList = res.data.data)
    // 获取采购类型
    this.axios({ method: 'get', url: '/api/basic_purchase_list',params:{type_id:2} }).then((res) => { this.purchaseTypeList = res.data.data }).catch((err) => { });
    // 获取基础物料类型
    this.axios({ method: 'get', url: '/api/basics_material_index_level', }).then((res) => { this.modalData.treeData[0].list = res.data }).catch((err) => { });
    // 获取供应商列表
    this.axios({ method: 'get', url: '/api/supply_list', }).then((res) => { this.suppliersList = res.data.data }).catch((err) => { });
    // 获取供应商分类
    this.axios({ method: 'get', url: '/api/basic_supply_list', }).then((res) => { this.modalSupplierData.treeData[0].sub = res.data }).catch((err) => { });
     // //获取项目列表
    this.axios({ method: 'get', url: '/api/purchase_orders_list', }).then((res) => {
       this.project_name = res.data.project_name;
       this.project_number = res.data.project_number;
    }).catch((err) => { });
    // // 获取项目列表
    // this.axios({ method: 'get', url: '/api/order_index', }).then((res) => {
    //   this.modalProjectData.tableData = res.data.data
    //   this.modal_project_total = res.data.total
    //   console.log(res);
    // }).catch((err) => { });
    // 获取紧急程度
    this.axios.get('/api/warning_list').then(res => { this.warningList = res.data.data })
    this.initModal()
    this.initProjectModal()
    this.initSupplierModal(this.modalSupplierData)
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    if (this.$route.query.order_no != '') {
      this.initData(this.$route.query.order_no)
    }
  },
  methods: {
    selectChange(row,index){
      if(!row.copy&&!row.edit){
        this.tableData[index].change = true;
        console.log(this.tableData)
      }
   },
    check(row){
      console.log(row);
      if(row.project_number!=='查看'){
        return
      }else{
      let data=[];
      this.purchase_data.forEach(v=>{
        if(row.material_detail_id == v[0].material_detail_id){
          
          v.forEach(m=>{
            let obj ={};
             obj.plan_no = m.plan_no;
             obj.plan_type_title=m.plan_type_title;
             obj.project_code = m.project_code;
             obj.project_name=m.project_title;
             obj.purchases_num = m.purchases_num;
             data.push(obj)
          })
         
        }
      })
      this.material_name = row.material_title;
      this.checkData = data;
      this.showCheck = true;
      }
    },
   selectRow(e){
       this.selectChoose = e;
    },
    total_sure(){
     
      //1项目信息 2数量 3税率
 switch(this.total_type){
        case 1:
          this.tableData.map((v)=>{
           if(v.project_number == '查看'){
             return
           }else{
            this.selectChoose.map(m=>{
              if(m.index == v.index ){
                     v.project_code =this.total_project_info.code?this.total_project_info.code:v.project_code;
            v.project_title = this.total_project_info.name?this.total_project_info.name:v.project_title;
               v._checked = true;
               v.ad = true
              }
          
            })
           }
          })
          break;
          case 2:
             this.tableData.map((v)=>{
           
            this.selectChoose.map(m=>{
              if(m.index == v.index ){
              
                     v.num =this.total_num;
            
               v._checked = true;
               v.ad = true
              }
          
            })})
            break;
            case 3:
             this.tableData.map((v)=>{
       
            this.selectChoose.map(m=>{
              if(m.index == v.index ){
               
                     v.fax =this.total_fax;
          
               v._checked = true;
               v.ad = true
              }
          
            })})
            break;
 }
    },
    handleSummary({ columns, data }){
  const sums = {};
                columns.forEach((column, index) => {
                    const key = column.key;
                    if (index === 1) {
                        sums[key] = {
                            key,
                            value: '合计'
                        };
                        return;
                    }
                    const values = data.map(item => Number(item[key]));
                    if (key == 'num'||key=='no_tax_amount'||key=='total_price'||key=='tax_amount') {
                        let v = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;
                            } else {
                                return prev;
                            }
                        }, 0);
                        //  this.table_total_num = Number(JSON.parse(JSON.stringify(v)));
                        sums[key] = {
                            key,
                            value:v
                        };
                    } else {
                        sums[key] = {
                            key,
                            value: ''
                        };
                    }
                });

                return sums;
            
    },
    DropDownSort(val){
if(this.selectChoose.length == 0){
        return this.$Message.warning('请先选择物料')
      }
      this.showTotal = true;
      this.total_type = val;
    },
    changenum(e,currentRow,index){
      console.log(currentRow)
         currentRow.num = e.target.value
                  currentRow.total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
                  this.tableData[index].total_price = (1 * currentRow.price * currentRow.num).toFixed(2)
                  currentRow.no_tax_amount = (1 * currentRow.no_tax_price * currentRow.num).toFixed(2)
                  this.tableData[index].no_tax_amount = (1 * currentRow.no_tax_price * currentRow.num).toFixed(2)
                  currentRow.tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                  this.tableData[index].tax_amount = (1 * currentRow.total_price - 1 * currentRow.no_tax_amount).toFixed(2)
                 if(!this.tableData[index].copy&&!this.tableData[index].edit){
       this.tableData[index].change = true;
      }
    },
       handleToolShow(index, row) {
      if (this.warehouse) {
        return
      } else {
        this.axios
          .get("/api/warehouse_stock_number", {
            params: {
              material_id: row.material_id,
              material_detail_id: row.material_detail_id,
            },
          })
          .then((res) => {
              this.warehouse= res.data
          });
      }
      // this.warehouse.num = this.warehouseTotal[index].num;
      // this.warehouse.warehouseName = this.warehouseTotal[index].warehouseName
    },
    initData (order_no) {
      this.axios({
        method: 'get',
        url: '/api/purchase_detail',
        params: { order_no }
      }).then((res) => {
         if(this.$route.query.type==2){
              this.tableData = []
          }
          
          this.tableData=res.data.list;
        const data = JSON.parse(JSON.stringify(res.data))
        delete data.list
        this.searchData = data
        this.searchData.crt_time = this.func.replaceDate(this.searchData.crt_time)
        this.searchData.arrive_time = this.func.replaceDate(this.searchData.arrive_time)
        this.searchData.order_time = this.func.replaceDate(this.searchData.order_time)
        this.searchData.supply_id = this.tableData[0].supply_id || null
        this.tableData.forEach(element => {
          if(element.state==1){
            element.project_number = '查看'
          }
          element.material_type = element.type_title;
          element.material_title = element.title;
          element.fax = 1*element.tax_rate*100;
          element.no_tax_price = (1 * element.price / (1 + 1*element.tax_rate)).toFixed(2)
          element.no_tax_amount = (1 * element.no_tax_price * element.num).toFixed(2)
          element.total_price = (1 * element.price * element.num).toFixed(2)
          element.tax_amount = (1 * element.total_price - 1 * element.no_tax_amount).toFixed(2)
        });
        if(this.$route.query.type!==2){
          this.tableData.push({material_title:'选择物料',_disabled:true})
        }
        console.log(this.tableData)
      }).catch((err) => { });
    },
    postData () {
       if(!this.searchData.order_time){
       return this.$Message.warning('请选择单据日期')
      };
      let obj = JSON.parse(JSON.stringify(this.searchData))
      obj.order_time = parseInt(new Date(obj.order_time).getTime() / 1000) || ''
      obj.arrive_time = parseInt(new Date(obj.arrive_time).getTime() / 1000) || ''
      // if(this.tableData == null){
      //   this.confirmDelete({
      //   content: '请选择物料',
      //   title:'提示',
      //   type: 'error',
      //   then: () => {
          
      //     // this.select_post(n, this.selectIds)
      //   },
      //   cancel: () => { }
      // })
      // }
      if (this.$route.query.type == 1||this.$route.query.type == 6) {
        // 新增
        let children=[];
       
        this.tableData.forEach(v=>{
            let obj={};
            obj.material_id=v.material_id;
            obj.material_detail_id = v.material_detail_id ;
            obj.project_code = v.project_code;
            obj.project_title = v.project_title ;
            obj.num = v.num;
            obj.price = v.price;
            obj.tax_rate = (1*v.fax)/100;
            if(v.project_number == '查看'){
              obj.state = 1
            }else{
              obj.state =0
            };
           this.purchase_data.forEach(m=>{
             if(v.material_detail_id = m[0].material_detail_id){
                  obj.children=[...m]
             }
           })
           children.push(obj)
        })
        
         children.pop();
        this.axios({
          method: 'post',
          url: '/api/purchase_add',
          data: {
            ...obj,
           children
          }
        }).then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg)
            this.goBack()
          }
        }).catch((err) => { });
      } else {
          let objData = [];
        objData =JSON.parse(JSON.stringify(this.tableData)); 
        objData.pop();
         let upd_list = [];
         let add_list = [];
         let del_list = this.delData;
         objData.forEach(v=>{
           if(v.edit||v.copy){
              add_list.push(v)
           }
            if(v.change||v.ad){
              if(!v.edit||!v.copy){
                 upd_list.push(v)
              }
            
           }
         })
        // 编辑
        this.axios({
          method: 'post',
          url: '/api/purchase_edit',
          data: {
            order_no: this.$route.query.order_no,
            ...obj,
            upd_list,
          add_list,
          del_list
          }
        }).then((res) => {
          if (res.code == 200) {
            this.$Message.success(res.msg)
            this.goBack()
          }
        }).catch((err) => { });
      }
    },
    handleReference (type) {
      this.$reference({
        type,
        title: '参照采购计划',
        then: (result, data) => {
          result.forEach(element => {
            element.num = 0
            element.no_tax_price = 0
            element.fax = 0
            element.price = 0
            element.no_tax_amount = 0
            element.tax_amount = 0
            element.total_price = 0
            // element.type_title = element.m_title
            // element.material_id = element.m_id
            element.supply_id = this.searchData.supply_id
            this.table_state = 1
          
          });
          let obj = {},newArr = [];
          result.forEach((item,suffix)=>{
           if(!obj[item.material_detail_id]){
               let arr =[];
               arr.push(item);
               newArr.push(arr);
               obj[item.material_detail_id]=item;
           }else{
             newArr.forEach((v,index)=>{
                if(v[0].material_detail_id == item.material_detail_id){
                  v.push(item)
                }
             })
           }
          })
       let copy_purchase_data = JSON.parse(JSON.stringify(this.purchase_data));
        let title = [];
        copy_purchase_data.forEach(m=>{
   if(title.indexOf(m[0].material_detail_id)<0){
                      title.push(m[0].material_detail_id);
                 }
        })
    
     let content = [];
         newArr.forEach(v=>{
           if(copy_purchase_data.length==0){
            
             this.purchase_data.push(v)
           }else{
               
               this.purchase_data.forEach((m,index)=>{
                  let id=[];
                  let m_content=[];
                 let val =copy_purchase_data[index];
                 val.forEach(s=>{
                     id.push(s.id)
                 })
            
            if(v[0].material_detail_id == m[0].material_detail_id){
                 m.forEach(mm=>{
                   v.forEach(vv=>{
                     if(mm.id == vv.id){
                       mm.purchases_num = 1*vv.purchases_num+1*mm.purchases_num
                     }
                    if(id.indexOf(vv.id)<0){
                      m_content.push(vv)
                    }
                   })
                  
                 })
                m.push(...m_content)
            }
            
           
         })
          if(title.indexOf(v[0].material_detail_id)<0){
            
              content.push(v)
             
            }
           }
          
       })
       this.purchase_data.push(...content);
       this.purchase_tableData = [];
    
          this.purchase_data.forEach(v=>{
            let data = {...v[0]};
             data.num = 0
            data.no_tax_price = 0
            data.fax = 0
            data.price = 0
            data.no_tax_amount = 0
            data.tax_amount = 0
            data.total_price = 0
            data.project_number = '查看'
            data.project_code = '查看'
            data.project_title = '查看'
            v.forEach(m=>{
              data.num+=m.purchases_num*1;
            })
           this.purchase_tableData.push(data)
          })
          console.log(this.purchase_tableData);
          this.plan_no = [];
          this.purchase_data.forEach(v=>{
            v.forEach(m=>{
               if(this.plan_no.indexOf(m.plan_no)<0){
                 this.plan_no.push(m.plan_no)
               }
            })
          })
        this.tableData = [{material_title:'选择物料',_disabled:true}];
          this.tableData.unshift(...this.purchase_tableData,...this.modalData.selectedData)
          // this.searchData.residential_name = result[0].residential_name
          // console.log(result)
        }
      })
    },
    handleModify () {
      this.tableData.forEach(element => {
        this.handleModifyTaxRate(element)
      });
    },
    handleSet (type, row, index) {
      if(type==3){
        if(row.project_number == '查看'){
          let obj = JSON.parse(JSON.stringify(row));
          obj.project_number = '';
          obj.id=obj.id+''+'a';
          // console.log(row);
          // console.log(obj)
          this.tableData.splice(index+1,0,obj)
          this.modalData.selectedData.push(obj)
           row.copy=true;
          // console.log(this.tableData)
        }else{
           this.tableData.splice(index+1,0,row);
           this.modalData.selectedData.push(row)
            row.copy=true;
           }
      }else if(type == 4){
        if(!row.copy&&!row.edit){
          this.delData.push(row.id)
        }
      this.tableData.splice(index, 1);
      this.purchase_data.forEach((v,idx)=>{
        if(row.material_detail_id == v[0].material_detail_id){
              this.purchase_data.splice(idx,1)
        }
      })
      this.modalData.selectedData.forEach((m,idx)=>{
        if(row.id === m.id){
             this.modalData.selectedData.splice(idx,1)
        }
      })
      }else{
        return
      }
    },
    handleSelect () {
      this.modalData.selectedData.forEach(element => {
        element.edit = true;
        element.material_title = element.title
        element.num = 0
        element.no_tax_price = 0
        element.fax = 0
        element.price = 0
        element.no_tax_amount = 0
        element.tax_amount = 0
        element.total_price = 0
        element.material_type = element.m_title
        element.material_id = element.m_id
        element.supply_id = this.searchData.supply_id
        element.project_code =null;
        element.project_title=null;
      });
      // console.log(this.modalData.selectedData);
     
      this.tableData.splice(this.tableData.length-1,0,...JSON.parse(JSON.stringify(this.modalData.selectedData))) 
      this.table_state = 0
      this.tableData.map((item,index)=>{
        item.residential_name = this.currentChoose.residential_name
        this.tableData.splice(index,1,item) });
      this.tableData.map((m,index)=>{
        m.index = index
      })
    },
    changeModalSize (e) {
      this.modal_page_size = e;
      this.initModal()
    },
    changeModalPage (e) {
      this.modal_page_index = e;
      this.initModal()
    },
    initModal () {
      this.axios({
        method: 'get',
        url: '/api/material_detail_list',
        params: {
          page_index: this.modal_page_index,
          page_size: this.modal_page_size,
          title: this.modalData.title
        }
      }).then((res) => {
        this.modal_total = res.data.total
        this.modalData.tableData = res.data.data
        this.reselection()
      }).catch((err) => { });
    },
    reselection () {
      this.modalData.selectedData.forEach(element => {
        this.modalData.tableData.forEach((ele, idx) => {
          if (element.material_detail_id == ele.material_detail_id) {
            this.$nextTick(() => {
              this.$refs.modelTable.$refs.tbody.objData[idx]._isChecked = true
              this.$forceUpdate()
            })
          }
        });
      });
    },
    handleSelection (selection, row) {
      this.modalData.selectedData.push(row)
    },
    handleSelectedDele (row, index) {
      this.modalData.selectedData.splice(index, 1)
    },
    goBack () { this.$router.go(-1) },
    handleProjectSelect () {
      this.searchData.residential_name = this.currentChoose.residential_name
      this.searchData.order_no = this.currentChoose.order_no
      this.tableData.map((item,index)=>{
        item.residential_name = this.currentChoose.residential_name
        this.tableData.splice(index,1,item)
      })
    },
    handleSupplierSelect () {
      this.searchData.supply_title = this.currentChoose.title
      this.searchData.supply_id = this.currentChoose.id
      this.tableData.forEach(element => {
        element.supply_id = this.currentChoose.id
      });
    },
    changeProjectModalSize (e) {
      this.modal_project_page_size = e
      this.initProjectModal()
    },
    changeProjectModalPage (e) {
      this.modal_project_page_index = e
      this.initProjectModal()
    },
    initProjectModal () {
      this.axios({
        method: 'get',
        url: '/api/order_index',
        params: {
          page_index: this.modal_project_page_index,
          page_size: this.modal_project_page_size,
          title: this.modalProjectData.title
        }
      }).then((res) => {
        this.modal_project_total = res.data.total
        this.modalProjectData.tableData = res.data.data
      }).catch((err) => { });
    },
    changeSupplierModalSize (e) {
      this.modal_supplier_page_size = e
      this.initSupplierModal(this.modalSupplierData)
    },
    changeSupplierModalPage (e) {
      this.modal_supplier_page_index = e
      this.initSupplierModal(this.modalSupplierData)
    },
    initSupplierModal (searchData) {
      this.axios({
        method: 'get',
        url: '/api/supply_list',
        params: {
          page_index: this.modal_supplier_page_index,
          page_size: this.modal_supplier_page_size,
          title: searchData.title,
          code: searchData.code,
        }
      }).then((res) => {
        this.modal_supplier_total = res.data.total
        this.modalSupplierData.tableData = res.data.data
      }).catch((err) => { });
    },
    handleSupplierTreeSlect (arr, row) {
      this.modalSupplierData.code = row.code
      this.initSupplierModal(this.modalSupplierData)
    },
    handleModifyTaxRate (row) {
      // this.$nextTick(() => {
      row.fax = this.fax_modify * 1
      row.price = (1 * row.no_tax_price * (1 + 1 * row.fax / 100)).toFixed(2)
      row.total_price = (1 * row.price * row.num).toFixed(2)
      row.tax_amount = (1 * row.total_price - 1 * row.no_tax_amount).toFixed(2)
      // this.$forceUpdate()
      // })
    },
    handleTreeSlect (array, row) {
      row.id && this.axios({
        method: 'get',
        url: '/api/material_detail_list',
        params: {
          page_index: this.modal_page_index,
          page_size: this.modal_page_size,
          m_id: row.id
        }
      }).then((res) => {
        this.modal_total = res.data.total
        this.modalData.tableData = res.data.data
      }).catch((err) => { });
    },
    handleSelectionAll (selection) {
      this.modalData.selectedData = this.modalData.selectedData.concat(selection)
    },
    handleSelectionAllCancel () {
      this.modalData.tableData.forEach(element => {
        this.modalData.selectedData = this.modalData.selectedData.filter((x) => {
          return x.material_detail_id != element.material_detail_id
        })
      });
    },
    handleSelectionCancel (selection, row) {
      this.modalData.selectedData.forEach((element, index) => {
        if (element.material_detail_id == row.material_detail_id) {
          this.modalData.selectedData.splice(index, 1)
        }
      });
    },
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  beforeCreate () { }, // 生命周期 - 创建之前
  beforeMount () { }, // 生命周期 - 挂载之前
  beforeUpdate () { }, // 生命周期 - 更新之前
  updated () { }, // 生命周期 - 更新之后
  beforeDestroy () { }, // 生命周期 - 销毁之前
  destroyed () { }, // 生命周期 - 销毁完成
  activated () { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
.content_topform {
  padding-top: 20px;
  /deep/.ivu-form {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  /deep/.ivu-form-item {
    display: inline-block;
    width: 300px;
  }
}
.content_table {
  .content_table_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
  }
  .content_table_btn_right {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.modal_content {
  display: flex;
  justify-content: center;
  overflow: hidden;
  overflow-y: auto;
  .modal_content_left {
  }
  .modal_content_center {
    width: 80%;
    border-left: 1px solid #666;
    border-right: 1px solid #666;
    padding: 0 20px;
    .modal_content_center_top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      span {
        width: 100px;
      }
      div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        span {
          width: 100px;
        }
      }
      .modal_content_center_body {
        overflow: hidden;
        overflow-y: auto;
        height: 500px;
      }
    }
    .modal_content_center_body {
      padding-top: 20px;
    }
    .modal_content_center_footer {
      display: flex;
      justify-content: center;
      padding-top: 20px;
    }
  }
  .modal_content_right {
    width: 30%;
    padding: 0 20px;
  }
}
/deep/ .ivu-table-wrapper {
  overflow: visible;
} //穿透iview
/deep/ .ivu-checkbox-disabled{
  display: none!important;
}
</style>