emis-frontend/src/views/demo/components_show.vue

<template>
  <div class="app-container" style="font-size: 14px;">
    <div>
        <div>表格组件</div>
        <div style="width: 100%; height:300px; position: relative;">
          <SheetEditor
            ref="luckysheetRef"
            v-bind:sheetData="sheetData"
          />
          <!-- v-on:getLuckySheetData="receive" -->
      </div>
    </div>
    <div>
        <div>时间范围组件</div>
        <div style="width: 100%; position: relative;">
          <elDateSimplePicker  placeholder="时间范围" style="z-index:9999" ></elDateSimplePicker>
          <!-- @change="dateTimeChange" -->
      </div>
    </div>
    <div style="overflow: auto;">
        <div>看板组件</div>
        <div style="width: 100%; height:300px; position: relative;">
          <DisplayBoard  placeholder="看板"  ></DisplayBoard>
          <!-- @change="dateTimeChange" -->
        </div>
    </div>
    <div>
        <div>倒计时</div>
        <div style="width: 100%; height:300px; position: relative;">
          <Countdown  placeholder="倒计时" :lastTime="lastTime" styleCss="color:red" ></Countdown>
          <!-- @change="dateTimeChange" -->
        </div>
    </div>
    <div>
        <div>font-awesome图标</div>
        <div style="width: 100%; height:300px; position: relative;">
          <span class="fa-stack fa-lg">
            <i class="fa fa-square-o fa-stack-2x"></i>
            <i class="fa fa-twitter fa-stack-1x"></i>
          </span>
          <el-input prefix-icon="fa fa-twitter fa-stack-1x" ></el-input>
        </div>
    </div>
    <div>
        <div>Iconfont 图标</div>
        <div style="width: 100%; height:300px; position: relative;">
          <span class="icon iconfont icon-jian">
            <i class="icon iconfont icon-jian"></i>
            <i class="icon iconfont icon-jian"></i>
          </span>
          <el-input prefix-icon="icon iconfont icon-jian" ></el-input>
        </div>
    </div>

    <div>
        <div>treeselect </div>
        <div style="width: 100%; height:300px; position: relative;">
          <treeselect ref="DRHA_EFaultModeTree"
              v-model="DRHA_EFaultModeTree_value"
              :multiple="true"
              :options="DRHA_EFaultModeTree_options"
              :flat="true"
              :show-count="true"
              :disable-branch-nodes="true"
              :searchable="false"
              @select="DRHA_EFaultModeTree_handleSelect"
              @deselect="DRHA_EFaultModeTree_handleDeSelect"
              placeholder=" 请选择..."/>

          <p>lables：{{DRHA_EFaultModeTree_lables}}</p>

          <p>ids:{{DRHA_EFaultModeTree_value}}</p>

        </div>
    </div>


    <div>
        <div>动态表格 </div>
        <div style="width: 100%; height:300px; position: relative;">
          <el-card>
            <!--查询区域-->
            <el-row :gutter="10">
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <span style="margin-right: 10px">选择框 -</span>
                  <el-select
                    v-model="specified_table"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.zb_code"
                      :label="item.zb_name"
                      :value="item.zb_code"
                    />
                  </el-select>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="grid-content bg-purple">
                  <el-button type="primary" plain @click="handleQueryClick">查 询</el-button>
                </div>
              </el-col>
            </el-row>
            <!--表格区域-->
            <dynamic-table
              v-if="dynamicTableShow"
              :table-data="tableData"
              :table-header="tableHeaders"
              :height="'550px'"
            />
          </el-card>

        </div>
    </div>




    <!-- <div>
        <div>文件排序组件</div>
        <div style="width: 100%; height:300px; position: relative;">
          <SortFile :images.sync="logoUrl" :limit="1" :upload-config="uploadLogoConfig" />
        </div>
    </div> -->


  </div>
</template>

<script>
import elDateSimplePicker from '@/components/DatePickerAdv/elDateSimplePicker';
import SheetEditor from "@/components/SheetEditor";
import DisplayBoard from "@/components/DisplayBoard";
import Countdown from "@/components/Countdown";
 // import the component
 import Treeselect from '@riophae/vue-treeselect'
 // import the styles
 import '@riophae/vue-treeselect/dist/vue-treeselect.css'
 import DynamicTable from '@/components/DynamicTable/index'

// import SortFile from "@/components/SortFile";

export default {
  name: "Index",
  components: { elDateSimplePicker,SheetEditor,DisplayBoard,Countdown,Treeselect,DynamicTable },
  data() {
    return {
      logoUrl:"",
      uploadLogoConfig:{},
      luckysheetName: "luckysheet数据编辑",
      sheetData: {
        excelHeader: ["姓名", "年龄", "性别"],
        excelData: {
          姓名: ["张三", "赵兰", "李四"],
          年龄: ["18", "17", "20"],
          性别: ["男", "女", "男"],
        },
      },
      luckySheetData: {
        excelHeader: [],
        excelData: {},
      },
      lastTime:'2022-12-20 00:00:00',
      DRHA_EFaultModeTree_value: null,
      DRHA_EFaultModeTree_lables: [],
      DRHA_EFaultModeTree_options: [ {
      id: '1',
      label: 'Fruits',
      children: [ {
      id: '1-1',
      label: 'Apple ?',
      isNew: true,
      }, {
      id: '1-2',
      label: 'Grapes ?',
      }, {
      id: '1-3',
      label: 'Pear ?',
      }, {
      id: '1-4',
      label: 'Strawberry ?',
      }, {
      id: 'watermelon',
      label: 'Watermelon ?',
      } ],
      }, {
      id: 'vegetables',
      label: 'Vegetables',
      children: [ {
      id: 'corn',
      label: 'Corn ?',
      }, {
      id: 'carrot',
      label: 'Carrot ?',
      }, {
      id: 'eggplant',
      label: 'Eggplant ?',
      }, {
      id: 'tomato',
      label: 'Tomato ?',
      } ],
      } ],
      };
  },
  methods: {
    DRHA_EFaultModeTree_handleSelect(node,instanceId){
      console.log("Select");
      this.DRHA_EFaultModeTree_lables.push(node.label);
    },

    DRHA_EFaultModeTree_handleDeSelect(node,instanceId){
    console.log("DeSelect");
      for (let i = 0;i<this.DRHA_EFaultModeTree_lables.length;i++){
      if(node.label == this.DRHA_EFaultModeTree_lables[i]){
      this.DRHA_EFaultModeTree_lables.splice(i,1);
      }
      }
    },
  }
};
</script>

<style scoped >

</style>