yos_web/src/HDrpManagement/workBillModule/modules/taskDetail/index.vue

<template>
  <div class="brand">
    <div style="display:flex;align-items:center;margin-bottom:16px">
<!--      <el-input
          placeholder="请输入搜索内容"
          suffix-icon="el-icon-search"
          v-model="params.content.where.condition"
          style="width:200px"
          size="mini"
          class="input-with-select inline-16"
          @keyup.native.enter="department(params.content.pageNumber=1)"
          @clear="department(params.content.pageNumber = 1)"
          clearable>
      </el-input>-->
      <addTop :disabled="isEdit()" v-if="tool.checkAuth($route.name,'workDetail')" @onSuccess="department"></addTop>
    </div>
    <el-table
      :data="tableData"
      stripe
      border
      row-key="sa_workorder_template_worksid"
      size="small"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
        width="120">
      </el-table-column>
      <el-table-column
        prop="sequence"
        label="序号"
        width="80px">
      </el-table-column>
      <el-table-column
        prop="workname"
        label="工作名称"
        show-overflow-tooltip
        width="400">
      </el-table-column>
      <el-table-column
        prop="remarks"
        show-overflow-tooltip
        label="操作说明"
        width="400">
        <template slot-scope="scope">
          {{scope.row.remarks ? scope.row.remarks : '--'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="fileupload"
        label="上传附件">
        <template slot-scope="scope">
          {{scope.row.fileupload ? scope.row.fileupload == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="textedit"
        label="上传文本">
        <template slot-scope="scope">
          {{scope.row.textedit ? scope.row.textedit == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="confirm_options"
        label="确认项">
        <template slot-scope="scope">
          {{scope.row.confirm_options ? scope.row.confirm_options == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
       <el-table-column
        prop="contractupload"
        label="上传合同">
        <template slot-scope="scope">
          {{scope.row.contractupload ? scope.row.contractupload == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="additem"
        label="添加商品">
        <template slot-scope="scope">
          {{scope.row.additem ? scope.row.additem == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="itemtype"
        label="商品类型">
        <template slot-scope="scope">
          {{scope.row.itemtype ? scope.row.itemtype == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="addperson"
        label="添加人员">
        <template slot-scope="scope">
          {{scope.row.addperson ? scope.row.addperson == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="amountpay"
        label="是否有偿">
        <template slot-scope="scope">
          {{scope.row.amountpay ? scope.row.amountpay == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        prop="required"
        label="是否验证工作"
        width="120px">
        <template slot-scope="scope">
          {{scope.row.required ? scope.row.required == 1 ? '非必填' : '必填' : '无'}}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        width="250"
        fixed="right">
        <template slot-scope="scope">
        <addTop :disabled="isEdit()" class="inline-16" v-if="tool.checkAuth($route.name,'workDetail')" @onSuccess="department" :data="scope.row"></addTop>
        <customBtn 
          type="text"
          btnName="删 除"
          message="确定删除该工作项吗?"
          idName="20230207145703"
          keyName="sa_workorder_template_worksids"
          :id="scope.row.sa_workorder_template_worksid"
          class="inline-16"
          :idIsArr="true"
          @onSuccess="department"
           v-if="tool.checkAuth($route.name,'workDetail')"
           :disabled="isEdit()"
        />
        <detail class="inline-16" :data="scope.row"/>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:16px;text-align:right">
      <el-pagination
          background
          small
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.content.pageNumber"
          :page-size="params.content.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import addTop from './components/addTop'
import Edit from './components/edit'
import detail from './components/detail'
export default {
  props:['data'],
  components:{
    Edit,
    addTop,
    detail
  },
  inject:['isEdit'],
  data() {
    return {
      tableData:[],
      params: {
        "id": "20230207145603",
        "version":1,
        "content": {
          "sa_workorder_templateid":this.$route.query.id,
          "parentid":0,
          "pageNumber":1,
          "pageSize":20,
          "where": {
            "condition":''
          }
        }
      },
      total:0,
    }
  },
  created() {
  },
  methods: {
    async department (callback) {
      this.params.content.sa_workorder_templateid = this.$route.query.id
      const res = await this.$api.requested(this.params)
      this.tableData = this.createTreeData(res.data)
      this.total = res.total
      console.log(this.tableData);
      
      
    },
    createTreeData (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        var elNode = {
          addperson:node['addperson'],
          textedit:node['textedit'],
          workname: node["workname"],
          additem:node['additem'],
          contractupload:node['contractupload'],
          confirm_options:node['confirm_options'],
          // sa_workorder_templateid:this.data.sa_workorder_templateid,
          parentid:node['parentid'],
          required:node['required'],
          confirm:node['confirm'],
          sequence:node['sequence'],
          sa_workpresetid:node['sa_workpresetid'],
          fileupload:node['fileupload'],
          itemtype:node['itemtype'],
          sa_workorder_template_worksid:node['sa_workorder_template_worksid'],
          siteid:node['siteid'],
          rowindex:node['rowindex'],
          amountpay:node['amountpay'],
          remarks:node['remarks'],
          children: [],
        }
          
        if (node.subdep && node.subdep.length > 0) {
          // 如果存在子节点
          for (var index = 0; index < node.subdep.length; index++) {
          // 遍历子节点, 把每个子节点看做一颗独立的树, 传入递归构造子树, 并把结果放回到新node的children中
          elNode.children.push(convertToElementTree(node.subdep[index]));
          }
        }
        return elNode;
      }
      array.forEach((element) => {
        arr.push(convertToElementTree(element))
      });
      return arr
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.params.content.pageSize = val
      this.department()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.params.content.pageNumber = val
      this.department()
    },
  },
  mounted () {
    this.department()
  }
};
</script>

<style scoped>
</style>