<template> 
 | 
  <el-card shadow="never" class="aui-card--fill"> 
 | 
    <div class="mod-sys__job}"> 
 | 
      <el-row :gutter="20"> 
 | 
        <el-col :span="5"> 
 | 
          <zt-company-tree @on-selected="onCompanySelected"/> 
 | 
        </el-col> 
 | 
        <el-col :span="19"> 
 | 
          <zt-table-wraper ref="tableObj" query-url="/sys/job/tree" delete-url="/sys/job" :lazy="true" :paging='false' v-slot="{ table }"> 
 | 
            <el-form :inline="true" :model="dataForm" @keyup.enter.native="table.query()"> 
 | 
              <el-form-item> 
 | 
                <el-input v-model="dataForm.name" :placeholder="$t('job.inputName')" clearable></el-input> 
 | 
              </el-form-item> 
 | 
              <el-form-item> 
 | 
                <zt-button type="query" @click="table.query()" v-show="selectCompanyFlag"/> 
 | 
                <zt-button type="add" perm="sys:job" @click="table.editHandle()"/> 
 | 
              </el-form-item> 
 | 
            </el-form> 
 | 
            <el-table v-loading="table.dataLoading" :data="table.dataList" 
 | 
                      v-adaptive="{bottomOffset:112}" 
 | 
                      height="650px" 
 | 
                      row-key="id" border default-expand-all 
 | 
                      @selection-change="table.selectionChangeHandle"> 
 | 
              <el-table-column prop="name" :label="$t('job.name')" min-width="150"></el-table-column> 
 | 
              <el-table-column prop="code" :label="$t('job.code')"></el-table-column> 
 | 
              <el-table-column prop="sort" :label="$t('job.sort')"></el-table-column> 
 | 
              <el-table-column prop="remark" :label="$t('job.remark')"></el-table-column> 
 | 
              <zt-table-column-handle :table="table" edit-perm="sys:job:update" delete-perm="sys:job:delete"/> 
 | 
            </el-table> 
 | 
            <!-- 弹窗, 新增 / 修改 --> 
 | 
            <add-or-update @refreshDataList="table.query" :companyId="dataForm.companyId" :companyName="dataForm.companyName"/> 
 | 
          </zt-table-wraper> 
 | 
        </el-col> 
 | 
      </el-row> 
 | 
    </div> 
 | 
  </el-card> 
 | 
</template> 
 | 
  
 | 
<script> 
 | 
  import AddOrUpdate from './job-add-or-update' 
 | 
  export default { 
 | 
    data() { 
 | 
      return { 
 | 
        dataForm: { 
 | 
          companyId: '', 
 | 
          companyName: '' 
 | 
        }, 
 | 
        selectCompanyFlag: false 
 | 
      } 
 | 
    }, 
 | 
    watch: { 
 | 
    }, 
 | 
    methods: { 
 | 
      onCompanySelected(data) { 
 | 
        this.dataForm.companyId = data.id 
 | 
        this.dataForm.companyName = data.name 
 | 
        this.selectCompanyFlag = true 
 | 
        this.$refs.tableObj.query() 
 | 
      } 
 | 
    }, 
 | 
    mounted() { 
 | 
    }, 
 | 
    components: { 
 | 
      AddOrUpdate 
 | 
    } 
 | 
  } 
 | 
</script> 
 |