yos_web/src/template/dataDetail/index.vue

<template>
  <div>
    <el-drawer
        :title="title"
        :visible.sync="dialogFormVisible"
        size="85%"
        direction="rtl"
        append-to-body
        :show-close="false"
        @close="onClose">
      <div class="drawer__panel" style="margin-bottom: 0!important;">
        <div class="inline-16">
          <label  class="search__label" >部门:</label>
          <el-cascader disabled class="inline-16" placement="bottom" ref="selectdep" size="small" v-model="departmentid" :options="deplist" :props="{emitPath:true,expandTrigger:'hover',checkStrictly:true,label:'label',value:'departmentid',children:'children'}" ></el-cascader>
        </div>
        <div class="inline-16">
          <label  class="search__label" >业务员:</label>
          <el-select v-model="person" filterable placeholder="请选择" size="small" disabled >
            <el-option
                v-for="item in personnelList"
                :key="item.index"
                :label="item.name"
                :value="item.userid">
            </el-option>
          </el-select>
        </div>
        <slot name="custom"></slot>
        <el-input  style="width:200px;" placeholder="搜索" :suffix-icon="param.content.where.condition?param.content.where.condition.length > 0?'':'':'el-icon-search'" v-model="param.content.where.condition" @keyup.native.enter="listData(param.content.pageNumber = 1)" @clear="clearSearchValue" size="small" class="input-with-select inline-16 layout_search__panel" clearable>
        </el-input>
        <table-detail :layout="layout" :data="list" :custom="true" :height="height" :width="true" style="margin-top: 10px">
          <template v-slot:customcol="scope">
            <div v-if="tableType == '营销费用'">
              <div>
                {{ scope.column.data[[scope.column.columnname]] || scope.column.columnname === 'operation' ? scope.column.data[[scope.column.columnname]] : '--' }}
              </div>
            </div>
            <div v-else>
              <div v-if="scope.column.columnname === 'tag'">
                <div v-if="scope.column.data.sys_tag">
                  <div v-for="item in scope.column.data.sys_tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                    <el-tag  color="#3874F6" size="mini" type="primary" effect="dark">
                      <span>{{item}}</span>
                    </el-tag>
                  </div>
                  <div v-for="item in scope.column.data.tag" :key="item.index"  style="float: left;margin-left: 5px;margin-bottom: 5px">
                    <el-tag color="#FA8C16" size="mini" type="warning" effect="dark">
                      <span>{{item}}</span>
                    </el-tag>
                  </div>
                </div>
                <div v-else>--</div>
              </div>
              <div v-else-if="scope.column.columnname == 'status'">
                <span style="color:#999999" v-if="scope.column.data[[scope.column.columnname]] == '已过期'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '跟进中'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#3874f6" v-else-if="scope.column.data[[scope.column.columnname]] == '待跟进'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '已无效'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已转化'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#3874f6" v-else-if="scope.column.data[[scope.column.columnname]] == '潜在'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '合作中'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已终止'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已失败'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '已结案'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span v-else>{{scope.column.data[[scope.column.columnname]]}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'reportstatus'">
                <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '已报备'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#52c41a" v-else-if="scope.column.data[[scope.column.columnname]] == '报备中'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#999999" v-else-if="scope.column.data[[scope.column.columnname]] == '未报备'">{{scope.column.data[[scope.column.columnname]]}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'projecttype'">
                {{scope.column.data.projecttype + '-' + scope.column.data.projecttype_remarks}}
              </div>
              <div v-else-if="scope.column.columnname === 'tradingstatus'">
                <span style="color:#3874f6" v-if="scope.column.data[[scope.column.columnname]] == '未成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#fa8c16" v-else-if="scope.column.data[[scope.column.columnname]] == '已成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
                <span style="color:#333333" v-else-if="scope.column.data[[scope.column.columnname]] == '多次成交'">{{scope.column.data[[scope.column.columnname]]}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'leader'">
                <span>{{scope.column.data['leader'][0]?scope.column.data['leader'][0].name:'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'depname'">
                <span>{{scope.column.data['leader'][0]?scope.column.data['leader'][0].depname:'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname === 'address'">
                <span>{{scope.column.data.province?scope.column.data.province + scope.column.data.city + scope.column.data.county + scope.column.data.address:'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'signamount_due'">
                <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'dealamount'">
                <span>{{scope.column.data[[scope.column.columnname]] ?tool.formatAmount(scope.column.data[[scope.column.columnname]],2):'--'}}</span>
              </div>
              <div v-else-if="scope.column.columnname == 'scale'">
                <span>{{scope.column.data[[scope.column.columnname]]?scope.column.data[[scope.column.columnname]] + scope.column.data.unitname:'--'}}</span>
              </div>
              <div v-else>
                {{ scope.column.data[[scope.column.columnname]] || scope.column.columnname === 'operation' ? scope.column.data[[scope.column.columnname]] : '--' }}
              </div>
            </div>

          </template>
        </table-detail>
        <div class="container normal-panel" style="text-align:right">
          <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[100, 150, 200, 250]"
              :page-size="100"
              layout="total,sizes, prev, pager, next, jumper"
              :total="total">
          </el-pagination>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "index",
  props:["title","layout","param","person","departmentid","isleave","height",'tableType'],
  data(){
    return {
      dialogFormVisible:false,
      list:[],
      total:0,
      currentPage:0,
      deplist:[],
      personnelList:[],
      nowPerson:'',
      nowDep:'',
      depmentParam:{
        "id": 20230620102004,
        "content": {
          "isleave":1
        }
      },
    }
  },
  methods:{
    onShow(){
      this.dialogFormVisible = true
      this.departmentrtment()
      this.param.content.pageNumber = 1
      this.listData()
    },
    async listData(){
      const res = await this.$api.requested(this.param)
      this.list = res.data
      this.total = res.total
      this.currentPage = res.pageNumber
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.param.content.pageSize = val
      this.listData()
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.param.content.pageNumber = val
      this.listData()
    },
    clearSearchValue () {
      this.$store.dispatch('clearSearchValue')
      this.listData(this.param.content.pageNumber = 1)
    },
    onClose(){
      this.dialogFormVisible = false
    },
    async departmentrtment() {
      const res = await this.$api.requested(this.depmentParam)
      this.deplist = this.createMenu(res.data.dep)
      this.personnelList = res.data.hr
    },
    createMenu (array) {
      var that = this
      let arr = []
      function convertToElementTree(node) {
        // 新节点
        if (node.subdep.length === 0){
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
          }
        }else {
          var elNode = {
            label: node["depname"],
            parentid:node['parentid'],
            parentname:node['parentname'],
            departmentid:node["departmentid"],
            value:node["departmentid"],
            remarks:node["remarks"],
            isused:node["isused"],
            changedate:node['changedate'],
            changeby:node['changeby'],
            createdate:node['createdate'],
            createby:node['createby'],
            depno:node['depno'],
            disabled:that.pageOnlyRead,
            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
    },
  }
}
</script>

<style scoped>

</style>