Doctre.vue

<template>
  <div class="eibs-tab">
    <!-- 左边 -->
    <c-col :span="24" style="height: 24px">
      <el-form-item label="Outgoing Messages" class="messageLabel"></el-form-item>
    </c-col>
    <c-col :span="24" style="height: 0px">
      <el-divider></el-divider>
    </c-col>
    <c-col :span="24">
      <c-col :span="21">
        <c-col :span="24">
          <c-istream-table-docpan :border="true" :list="data1" style="width:100%;text-align:center">
            <el-table-column label="Type" width="auto">
              <template slot-scope="scope">
                <span>{{ getType(scope.row.index) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Document" width="auto">
              <template slot-scope="scope">
                <span>{{ model.trnmod.trndoc.doceot[scope.row.index].pandsc }}</span>
              </template>
            </el-table-column>
            <el-table-column label="Cre.TRN" width="auto"></el-table-column>
            <el-table-column label="Date" width="auto">
              <template>
                <span>{{ getNow() }}</span>
              </template>
            </el-table-column>
          </c-istream-table-docpan>
        </c-col>
      </c-col>
      <c-col :span="3">
        <c-col :span="24" style="margin-top: 15px;margin-left: 20px">
          <c-button size="small" type="primary" @click="onTrndocButshw" style="width: 80px;">
            Show
          </c-button>
        </c-col>
        <c-col :span="24" style="margin-top: 15px;margin-left: 20px">
          <c-button size="small" type="primary" @click="onTrndocButadd" style="width: 80px;">
            Details
          </c-button>
        </c-col>
        <c-col :span="24" style="margin-top: 40px;margin-left: 20px">
          <c-button size="small" type="primary" @click="onTrndocButnew" style="width: 80px;">
            Add New
          </c-button>
        </c-col>
        <c-col :span="24" style="margin-top: 15px;margin-left: 20px">
          <c-button size="small" type="primary" @click="onTrndocButattto" style="width: 80px;">
            Attach to
          </c-button>
        </c-col>
        <c-col :span="24" style="margin-top: 15px;margin-left: 20px">
          <c-button size="small" type="primary" @click="onTrndocButdel" style="width: 80px;">
            Suppress
          </c-button>
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="24" style="margin-top: 20px">
      <c-col :span="12" style="height: 24px;margin-top: 20px;">
        <el-form-item label="Previous Messages" class="messageLabel"
          v-show="model.trnmod.trndoc.shwinc || model.trnmod.trndoc.shwout"></el-form-item>
      </c-col>
      <c-col :span="12">
        <c-col :span="12" style="height: 24px;margin-top: 20px;">
          <c-checkbox v-model="model.trnmod.trndoc.shwinc">Show Incoming Messages</c-checkbox>
        </c-col>
        <c-col :span="12" style="height: 24px;margin-top: 20px;">
          <c-checkbox v-model="model.trnmod.trndoc.shwout">Show Outgoing Messages</c-checkbox>
        </c-col>
      </c-col>
    </c-col>

    <c-col :span="24" style="height: 0px" v-show="model.trnmod.trndoc.shwinc || model.trnmod.trndoc.shwout">
      <el-divider></el-divider>
    </c-col>

    <c-col :span="24">
      <c-col :span="21">
        <c-col :span="24">
          <c-table :border="true" :list="data2" style="width:100%,text-align:center"
            v-show="model.trnmod.trndoc.shwout">
            <el-table-column label="Type" width="auto"></el-table-column>
            <el-table-column label="Document" width="auto"></el-table-column>
            <el-table-column label="Cre.TRN" width="auto"></el-table-column>
            <el-table-column label="Date" width="auto"></el-table-column>
          </c-table>
        </c-col>
      </c-col>
      <c-col :span="3">
        <c-col :span="24" style="margin-top: 15px;margin-left: 20px">
          <c-button size="small" type="primary" @click="onTrndocButatt" style="width: 80px;">
            Attach
          </c-button>
        </c-col>
        <c-col :span="24" style="margin-top: 150px;margin-left: 20px">
          <c-button size="small" type="primary" @click="onTrndocButatt">
            i
          </c-button>
        </c-col>
      </c-col>
    </c-col>

    <!-- <c-col :span="24">
      <el-form-item
        style="text-align: left;"
        class="formItemLabel"
        label="Outgoing Correspondence,Attachments and other Documents"
        label-width="100%"
      >
      </el-form-item>
    </c-col>
    <c-col :span="24"> 
        <c-col :span="14">                                     
          <c-col :span="24">
              <div style="height: 300px; width: 100%; border: 1px #ebeef5 solid">
                <el-tree
                  ref="menuTree"
                  :data="data"
                  :props="defaultProps"
                  @node-click="handleNodeClick"
                ></el-tree>
              </div>
          </c-col>             
                      
          <c-col :span="24" style="margin-top: 10px">
              <c-col :span="4">
                <el-form-item
                  label="Connected Ducuments"
                  v-show="isShow1 || isShow2"
                ></el-form-item>
                <el-form-item
                  label=""
                  v-show="!(isShow1 || isShow2)"
                ></el-form-item>
              </c-col>
              <c-col :span="8">
                <el-form-item label="">
                  <c-checkbox v-model="isShow1">Show Incoming Messages</c-checkbox>
                </el-form-item>
              </c-col>
              <c-col :span="8" :offset="2">
                <el-form-item label="">
                  <c-checkbox v-model="isShow2">Show Outgoing Messages</c-checkbox>
                </el-form-item>
              </c-col>
            </c-col>
            
          </c-col>           
        <c-col :span="6" :offset="1">
            <c-col :span="24">
              <c-button size="small" type="primary" @click="onTrndocButshw">
                Show
              </c-button>
            </c-col>

            <c-col :span="24" style="margin-top: 15px">
              <c-button size="small" type="primary" @click="onTrndocButadd">
                详情
              </c-button>
            </c-col>

            <c-col :span="24" style="margin-top: 40px">
              <c-button size="small" type="primary" @click="onTrndocButnew">
                Add New
              </c-button>
            </c-col>

            <c-col :span="24" style="margin-top: 15px">
              <c-button size="small" type="primary"
                :disabled="atoDisabled"
                @click="onTrndocButattto" 
                
              >
                Attach to
              </c-button>
            </c-col>

            <c-col :span="24" style="margin-top: 15px">
              <c-button size="small" type="primary" @click="onTrndocButdel" 
                :disabled="delDisabled"
              >
                Delete
              </c-button>
            </c-col>
            <c-col :span="24" style="margin-top: 80px">
              <c-button size="small" type="primary" @click="onTrndocButatt" 
                :disabled="aDisabled"
              >
                Attach
              </c-button>
            </c-col>
            <c-col :span="24" style="margin-top: 150px">
              <c-button size="small" type="primary" @click="onTrndocButatt">
                i
              </c-button>
            </c-col>
          </c-col>
    </c-col> -->
  </div>
</template>
<script>
import Api from "~/service/Api"
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable"
import moment from 'moment'

export default {
  inject: ['root'],
  mixins: [commonProcess],
  props: ["model", "codes"],
  data() {
    return {
      data1: [],
      data2: [],
      isShow1: false,
      isShow2: false,
      aDisabled: true,
      atoDisabled: true,
      delDisabled: true,
      data: [
        {
          label: "CHINA EVERBRIGHT BANK",
          children: [{ label: "'企业当前管理信息'via" }],
        },
        {
          label: "Internal",
          children: [{ label: "'收账通知'via" }],
        },
      ],
    }
  },
  methods: {
    getType(idx) {
      for (let i = 0; i < this.codes.doceotCortyp.length; i++) {
        const c = this.codes.doceotCortyp[i];
        if (this.model.trnmod.trndoc.doceot[idx].cortyp === c.value) {
          return c.label;
        }
      }
      return "";
    },
    getNow() {
      return moment().format('yyyy-MM-DD')
    },
    handleNodeClick(data) {
      if (!data.children) { //如果没有叶子节点 ，按钮置灰
        this.atoDisabled = false;
        this.delDisabled = false;
      } else {
        this.atoDisabled = true;
        this.delDisabled = true;
      }
    },
    defaultProps() { },
    async onTrndocButshw() {
      let rtnmsg = await this.executeRule("trndoc.butshw")
      if (rtnmsg.respCode == SUCCESS) {
        //TODO 处理数据逻辑

      }
      else {
        this.$notify.error({ title: '错误', message: '服务请求失败！' });
      }
    },
    async onTrndocButadd() {
      let rtnmsg = await this.executeRule("trndoc.butadd")
      if (rtnmsg.respCode == SUCCESS) {
        //TODO 处理数据逻辑

      }
      else {
        this.$notify.error({ title: '错误', message: '服务请求失败！' });
      }
    },
    async onTrndocButnew() {
      let rtnmsg = await this.executeRule("trndoc.butnew")
      if (rtnmsg.respCode == SUCCESS) {
        //TODO 处理数据逻辑

      }
      else {
        this.$notify.error({ title: '错误', message: '服务请求失败！' });
      }
    },
    async onTrndocButattto() {
      let rtnmsg = await this.executeRule("trndoc.butattto")
      if (rtnmsg.respCode == SUCCESS) {
        //TODO 处理数据逻辑

      }
      else {
        this.$notify.error({ title: '错误', message: '服务请求失败！' });
      }
    },
    async onTrndocButdel() {
      let rtnmsg = await this.executeRule("trndoc.butdel")
      if (rtnmsg.respCode == SUCCESS) {
        //TODO 处理数据逻辑

      }
      else {
        this.$notify.error({ title: '错误', message: '服务请求失败！' });
      }
    },
    async onTrndocButatt() {
      let rtnmsg = await this.executeRule("trndoc.butatt")
      if (rtnmsg.respCode == SUCCESS) {
        //TODO 处理数据逻辑

      }
      else {
        this.$notify.error({ title: '错误', message: '服务请求失败！' });
      }
    },
  },
  watch: {
    "model.trnmod.trndoc.doceot": {
      handler(val, oldVal) {
        var arr = [];
        let k = 0;
        for (let i = 0; i < val.length; i++) {
          if (val[i].role != "") {
            arr[k++] = val[i];
          }
        }
        this.data1 = arr
      },
      immediate: true
    }
  },
  created: function () {

  }
}
</script>
<style>
.formItemLabel>>>.el-form-item__label {
  text-align: left;
}
</style>