tom
2024-08-03 2278ff7c0401f7f97e168a0943192357c1999cbf
module/visit/page/script_list.html
New file
@@ -0,0 +1,745 @@
   <!doctype html>
<html>
   <head>
      <meta charset="utf-8"><meta http-equiv="Expires" content="0"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache" content="no-cache">
      <title>话术管理</title>
      <script type="text/javascript">
         var pageVue = null;
         function loadJsCss(callback) {
            var jscss_urls = [];
            window.top.initJsCss(document, jscss_urls, callback);
         };
         function initVue() {
            new ListVue({
               el: "#vbody",
               data: {
                  dataname: "md_common_phrases",
                  title: "话术管理",
                  orderby: "",
                  filterfieldClick: {},
                  tablefieldClick: {},
                  formfieldClick: {},
                  dataRequest: [
                     // {
                     //    name: "md_province",
                     //    dataname: "md_province",
                     //    // url: "root/data/newEntity",
                     //    // paramsobj: {dataname: "md_org_data", type_code:"Distributor"},
                     //    isnotoption: false, //true:不是选项
                     //    code:"name",//是下拉选项时设置
                     //    label:"name",//是下拉选项时设置
                     //    filter: ""
                     // },
                     // {
                     //    name: "machine_state",
                     //    dataname: "v_state_machine_state",
                     //    // url: "root/data/newEntity",
                     //    // paramsobj: {dataname: "md_org_data", type_code:"Distributor"},
                     //    isnotoption: false, //true:不是选项
                     //    code:"code",//是下拉选项时设置
                     //    label:"name",//是下拉选项时设置
                     //    // orderby: "index_no",
                     //    filter: "parent_id='md_org_data'"
                     // }
                  ],
                  dataRequestObj:{},
                  filterFields: [
                     // {isshow: "T", field: "code", name: "编码", filterfield:"", filteroperator: "like", type: ""},
                     // {isshow: "T", field: "name", name: "经销商名称", filterfield:"", filteroperator: "like", type: ""},
                     // {isshow: "T", field: "state_name", name: "状态", filterfield:"", filteroperator: "like", type: ""},
                  ],
                  tableFields: [
                     // {field: "state_name", name: "状态", isshow: "T"},
                     // {field: "code", name: "编码", isshow: "T"},
                     // {field: "name", name: "经销商名称", isshow: "T",width:"240",align:"left"},
                     // {field: "short_name", name: "经销商简称", isshow: "T",width:"150",align:"left"},
                     // {field: "type_name", name: "经销商类型", isshow: "T",width:"100"},
                     // {field: "province", name: "省份", isshow: "T",width:"120"},
                     // {field: "city", name: "城市", isshow: "T",width:"120"},
                     // {field: "county", name: "区县", isshow: "T",width:"120"},
                     // {field: "address", name: "注册地址", isshow: "T",width:"300",align:"left"},
                     // {field: "field1", name: "经营地址", isshow: "T",width:"300",align:"left"},
                     // {field: "field2", name: "业务负责人", isshow: "T",width:"100"},
                     // {field: "field3", name: "联系方式", isshow: "T",width:"150"},
                     // {field: "field4", name: "邮箱", isshow: "T",width:"200",align:"left"},
                     // {field: "field5", name: "授权产品", isshow: "T",width:"200",align:"left"},
                     // {field: "field6", name: "经销商授权类型", isshow: "T",width:"200"},
                     // {field: "field7", name: "关联公司情况说明", isshow: "T",width:"300",align:"left"},
                     // {field: "field8", name: "授权医院列表", isshow: "T",width:"280",align:"left"},
                     // {field: "field9", name: "授权内容", isshow: "T",width:"280",align:"left"},
                     // {field: "field11", name: "业务需求原因", isshow: "T",width:"300",align:"left"},
                  ],
                  cbuttons_r: {},
                  ctabs_r: {},
                  isCustomer: false,
               },
               created() {
                  //未提交的数据仅创建人可见
                  // this.filterTxt = " ((creator_id='"+ window.top.vue.userinfo.id +"' and (state_code in ('Input', 'input', 'Rejected', '') or state_code is null )) or (state_code not in ('Input', 'input', 'Rejected', '') and state_code is not null))"
                  // this.fieldsToFieldsObj();//标识2:为什么这里字段数组转字段obj了,后面onQuery里还要转
                  this.isCustomer = window.top.vue.isCustomer
               },
               mounted() {
                  var me = this;
                  if (window.top.tab.selected.option.page_id) {
                     this.title = window.top.tab.selected.option.menutitle
                     getPageByPageId(window.top.tab.selected.option.page_id, function(result){
                        me.cbuttons_r = result.buttons_r;
                        //标记1:预加载数据,cbuttons_r,buttons_r在哪没找到,dataRequestObj是?,以及上方if,是if为true才预加载,那if的是?
                        //预加载数据
                        if (me.dataRequest && me.dataRequest.length) {
                           var result = {};
                           me.loadRequestData(me.dataRequest, result, function(data) {
                              me.dataRequestObj = data;
                              //预加载数据后给哪些字段设置options或formatterjson
                              me.initData();
                           });
                        }
                        else {
                           me.initData();
                        }
                        me.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
                           hideLoading();
                        });
                     })
                  }
               },
               methods:{
                  initData() {
                     var me = this;
                     this.onQuery(function(result, callback) {//查询后的回调,用于获取字段的
                        if (result.meta && result.meta[me.dataname] && result.meta[me.dataname].fields) {
                           var metas = clone(result.meta[me.dataname].fields);
                           var filterFields_ = [];
                           var tableFields_ = [];
                           metas.map(f=>{
                              f.isshow = "T";
                              if (f.field == "md_org_account__bu_name") {
                                 f.optionsgroup = "bu"
                              }
                              if (f.field == "md_org_account__company_name") {
                                 f.optionsgroup = "company"
                              }
                              if (f.field == "province") {
                                 f.options = me.dataRequestObj.md_province
                              }
                              if (f.field == "is_editable") {
                                 f.isshow = "F"
                              }
                              // if (f.field == "city") {
                              //    f.options = me.dataRequestObj.md_city
                              // }
                              if (me.isCustomer && f.field == "md_position_hierarchy__position_path") {
                                 f.isshow = "F"
                                 f.isfilter = false
                              }
                              if (f.isfilter) {
                                 if (f.field == "state_name") {
                                    f.filterfield = "state_code";
                                    f.options = me.dataRequestObj.machine_state;
                                 }
                                 filterFields_.push(clone(f));
                              }
                              else {
                                 var filter_f = clone(f);
                                 filter_f.isshow = "F";
                                 filterFields_.push(filter_f);
                              }
                              tableFields_.push(clone(f));
                           })
                           if (!me.filterFields || (me.filterFields && me.filterFields.length == 0)) {
                              me.filterFields = clone(filterFields_);
                              me.tableFields = clone(tableFields_);
                              //字段数组转字段obj,目的为了筛选时获取字段属性
                              me.fieldsToFieldsObj();
                              //设置字段事件
                              me.tableFieldClick();
                           }
                        }
                        if (callback) {
                           callback();
                        }
                     });
                  },
                  tableFieldClick() {
                     var me = this;
                     //表格字段事件设置
                     this.tablefieldClick = {
                        state_name: {//状态
                           val: {//有值时的点击事件
                              notclick_val: ["草稿","录入"],//不可点击的值,1、是数组["11","22"];2、以“;”分隔的字符串"111;222"
                              notclick_bindfield: [],
                              onclick: function(obj) {
                                 var config = {
                                    totab: false,
                                    width: "1100px",
                                    height: "520px",
                                    icon: "icon-product",
                                    text: "流程步骤",
                                    id: "popup_workflow_step_user" + obj.row.id,
                                    url: "module/tool/page/popup_workflow_step_user.html?v=2023020703",
                                    data: obj.row,
                                    delta: {},//{machine_code: "Org_Account_Open"},
                                    sceneCode: "browse",//"refuseedit",//"approval", //"add"//"browse",
                                    callback: function(obj, callback) {
                                       if (callback) {
                                          callback();
                                       }
                                    }
                                 };
                                 me.doPopupByPublic(config);
                              },
                           },
                        },
                        code: {//字段事件设置
                           // prefixclass: {
                           //    setclass: function(row, field){
                           //       // 根据逻辑返回class名称
                           //       return "prefixclass"
                           //    }
                           // },
                           val: {//有值时的点击事件
                              notclick_val: "",//不可点击的值,1、是数组["11","22"];2、以“;”分隔的字符串"111;222"
                              notclick_bindfield: [],//当该字段值等于指定字段值时不可点击["filterfield": "111"]
                              onclick: function(obj) {//数据值点击事件
                                 var sceneCode_ = "browse";
                                 //如果是创建人且是录入状态或退回状态则是编辑状态
                                 if (obj.row.creator_id == window.top.vue.userinfo.id && (obj.row.state_code == "Input" || obj.row.state_code == "input" || obj.row.state_code == "Rejected")) {
                                    sceneCode_ = "edit";
                                 }
                                 var config = {
                                    totab: true, //true: 以Tab导航的方式打开
                                    width: "1100px",
                                    height: "520px",
                                    icon: "icon-product",
                                    text: "商业信息 " + (obj.row.name ? obj.row.name : ""),
                                    id: "customer_edit_browse" + obj.row.id,//totab: true时需设置,用于判断是否已打开此页面
                                    url: "module/md/page/customer/page/customer_edit.html",
                                    data: obj.row,
                                    delta: {closeCode:"1"},
                                    sceneCode: sceneCode_,//"refuseedit",//"approval", //"add"//"browse",
                                    callback: function(obj, callback) {
                                       me.onQuery();
                                       if (callback) {
                                          callback();
                                       }
                                    }
                                 };
                                 me.doPopupByPublic(config);
                              },
                           },
                        },
                        credit_quota: {
                           val: {//有值时的点击事件
                              notclick_val: "",//不可点击的值,1、是数组["11","22"];2、以“;”分隔的字符串"111;222"
                              notclick_bindfield: [],//当该字段值等于指定字段值时不可点击["filterfield": "111"]
                              onclick: function(obj) {//数据值点击事件
                                 var menuobj = getMainMenuById("A6-01-02");
                                 var parames = {
                                    menuid: "A6-01-02",
                                    delta: {
                                       filterobj: {
                                          customer_code: obj.row.code,
                                          customer_name: obj.row.name
                                       }
                                    }
                                 }
                                 Root.popupParames = parames;
                                 Root.tab.open(menuobj, false);
                                 // var config = {
                                 //    totab: true, //true: 以Tab导航的方式打开
                                 //    icon: "icon-product",
                                 //    text: "客户开户",
                                 //    id: "A6-01-02",//totab: true时需设置,用于判断是否已打开此页面
                                 //    url: "module/md/page/customer/page/customer_acct.html",
                                 //    data: obj.row,
                                 //    delta: {closeCode:"1"},
                                 //    sceneCode: "browse",//"refuseedit",//"approval", //"add"//"browse",
                                 //    callback: function(obj, callback) {
                                 //       me.onQuery();
                                 //       if (callback) {
                                 //          callback();
                                 //       }
                                 //    }
                                 // };
                                 // me.doPopupByPublic(config);
                              },
                           },
                        }
                     };
                  },
                  rowClick(obj){
                     var me = this;
                     me.selectedrow = obj.row;
                  },
                  addCustomer(){
                     let me = this;
                     var config = {
                        totab: true, //true: 以Tab导航的方式打开
                        width: "1000px",
                        height: "500px",
                        icon: "icon-product",
                        text: "商业新增",
                        id: "customer_edit",//totab: true时需设置,用于判断是否已打开此页面
                        url: "module/md/page/customer/page/customer_edit.html",
                        data: {},
                        delta: {},
                        sceneCode: "add",//"refuseedit",//"approval", //"add"//"browse",
                        callback: function(obj, callback) {
                           me.onQuery();
                           if (callback) {
                              callback();
                           }
                        }
                     };
                     me.doPopupByPublic(config);
                  },
                  editData(sceneCode){
                     var me = this;
                     var row = me.selectedrow;
                     if(!row){
                        Root.message({
                           type: 'warning',
                           message: '请选择一条数据'
                        });
                        return;
                     }
                     var config = {
                        totab: true, //true: 以Tab导航的方式打开
                        width: "900px",
                        height: "500px",
                        icon: "icon-product",
                        text: "客户编辑",
                        id: "customer_edit" + row.id,//totab: true时需设置,用于判断是否已打开此页面
                        url: "module/md/page/customer/page/customer_edit.html",
                        data: row,
                        delta: {},
                        sceneCode: sceneCode,//"refuseedit",//"approval", //"add"//"browse",
                        callback: function(obj, callback) {
                           me.onQuery();
                           if (callback) {
                              callback();
                           }
                        }
                     };
                     me.doPopupByPublic(config);
                  },
                  changeData() {
                     var me = this;
                     Root.confirm('确定变更【' + this.selectedrow.name + '】吗?', '变更提示', {
                       confirmButtonText: '变 更',
                       cancelButtonText: '取 消',
                       type: 'warning'
                     }).then(() => {
                        me.doChangeData();
                     }).catch(() => {
                        Root.message({
                           type: 'info',
                           message: '已取消变更'
                        });
                     });
                  },
                  doChangeData(){
                     var me = this;
                     var row = me.selectedrow;
                     if(!row){
                        Root.message({
                           type: 'warning',
                           message: '请选择一条数据'
                        });
                        return;
                     }
                     var config = {
                        totab: true, //true: 以Tab导航的方式打开
                        width: "900px",
                        height: "500px",
                        icon: "icon-product",
                        text: "经销商变更",
                        id: "customer_change" + row.id,//totab: true时需设置,用于判断是否已打开此页面
                        url: "module/md/page/customer/page/customer_change.html",
                        data: row,
                        delta: {},
                        sceneCode: "change",//"refuseedit",//"approval", //"add"//"browse",
                        callback: function(obj, callback) {
                           me.onQuery();
                           if (callback) {
                              callback();
                           }
                        }
                     };
                     me.doPopupByPublic(config);
                  },
                  // openCustomer(){
                  //    let me = this;
                  //    var row = me.selectedrow;
                  //    if(!row){
                  //       Root.message({
                  //          type: 'warning',
                  //          message: '请选择一条数据'
                  //       });
                  //       return;
                  //    }
                  //    if(row.state_name == "已开户"){
                  //       Root.message({
                  //          type: 'warning',
                  //          message: '该经销商已开户'
                  //       });
                  //       return;
                  //    }
                  //    var config = {
                  //       totab: false, //true: 以Tab导航的方式打开
                  //       width: "1100px",
                  //       height: "520px",
                  //       icon: "icon-product",
                  //       text: "客户开户",
                  //       id: "test_page",//totab: true时需设置,用于判断是否已打开此页面
                  //       url: "module/md/page/customer/page/customer_acct.html",
                  //       data: row,
                  //       delta: {},
                  //       sceneCode: "add",//"refuseedit",//"approval", //"add"//"browse",
                  //       callback: function(obj, callback) {
                  //          me.onQuery();
                  //          if (callback) {
                  //             callback();
                  //          }
                  //       }
                  //    };
                  //    me.doPopupByPublic(config);
                  // },
                  // approvalData(){
                  //    let me = this;
                  //    var row = me.selectedrow;
                  //    if(!row){
                  //       Root.message({
                  //          type: 'warning',
                  //          message: '请选择一条数据'
                  //       });
                  //       return;
                  //    }
                  //    var config = {
                  //       totab: false, //true: 以Tab导航的方式打开
                  //       width: "1100px",
                  //       height: "520px",
                  //       icon: "icon-product",
                  //       text: "客户开户审批",
                  //       id: "test_page",//totab: true时需设置,用于判断是否已打开此页面
                  //       url: "module/md/page/customer/page/customer_acct.html",
                  //       data: row,
                  //       delta: {},
                  //       sceneCode: "approval",//"refuseedit",//"approval", //"add"//"browse",
                  //       callback: function(obj, callback) {
                  //          me.onQuery();
                  //          if (callback) {
                  //             callback();
                  //          }
                  //       }
                  //    };
                  //    me.doPopupByPublic(config);
                  // },
                  //关户或作废
                  // changeData() {
                  //    var me = this;
                  //    Root.confirm('确定变更【' + this.selectedrow.name + '】吗?', '变更提示', {
                  //      confirmButtonText: '变 更',
                  //      cancelButtonText: '取 消',
                  //      type: 'warning'
                  //    }).then(() => {
                  //       me.editData();
                  //    }).catch(() => {
                  //       Root.message({
                  //          type: 'info',
                  //          message: '已取消变更'
                  //       });
                  //    });
                  // },
                  //关户或作废
                  // closeData() {
                  //    var me = this;
                  //    Root.confirm('确定将【' + this.selectedrow.name + '】关户吗?', '关户提示', {
                  //      confirmButtonText: '关 户',
                  //      cancelButtonText: '取 消',
                  //      type: 'warning'
                  //    }).then(() => {
                  //       let param = {
                  //          id: me.selectedrow.id,
                  //          dataname: "md_org",
                  //       }
                  //       Server.call("root/data/Close", param, function(result) {
                  //          console.log(result);
                  //          Root.message({
                  //             type: 'success',
                  //             message: '已关户'
                  //          });
                  //          me.onQuery();
                  //       });
                  //    }).catch(() => {
                  //       Root.message({
                  //          type: 'info',
                  //          message: '已取消关户'
                  //       });
                  //    });
                  // },
                  //主界面提交
                  dataSubmit() {
                     var me = this;
                     var row = this.selectedrow;
                     let param = {
                        dataName: "md_org_data",
                        id: row.id,
                     }
                     Server.call("root/data/InputCommit", param, function(result) {  //标记1:inputCommit是哪里的,这个dataName是怎么来的
                        Root.message({
                           type: 'success',
                           message: '提交成功'
                        });
                        me.onQuery();
                     });
                  },
                  onAddRecord() {
                     var menuobj = getMainMenuById("A6-01-03");
                     var parames = {
                        menuid: "A6-01-03",
                        delta: {
                           filterobj: {
                              customer_name: this.selectedrow.name
                           }
                        }
                     }
                     Root.popupParames = parames;
                     Root.tab.open(menuobj, false);
                  },
                  onAddRecord2() {
                     var me = this;
                     var config = {
                        totab: true, //true: 以Tab导航的方式打开
                        icon: "icon-product",
                        text: "备案申请",
                        id: "record_add_c" + me.selectedrow.id,//totab: true时需设置,用于判断是否已打开此页面
                        url: "module/agreement/page/record_add.html",
                        data: {},
                        delta: {org: me.selectedrow},
                        sceneCode: "add",//"refuseedit",//"approval", //"add"//"browse",
                        callback: function(obj, callback) {
                           me.onQuery();
                           if (callback) {
                              callback();
                           }
                        }
                     };
                     me.doPopupByPublic(config);
                  },
                  // onDownload() {
                  //    let me = this;
                  //    var filter_ = "1 = 1";
                  //    // if(me.saveUser != "") {
                  //    //    filter_ = " customer_code = '" + me.saveUser + "'";
                  //    // }
                  //    filter_ = this.getFilterData(filter_);
                  //    let param = {
                  //       dataname: "orgAddReport", //'md_org_data',
                  //       filename: '经销商新增导出' + String(new Date().getTime()),
                  //       filter: filter_,
                  //       orderby: "update_time desc",
                  //       token: Root.getToken()
                  //    }
                  //    textdownloadForm(param);
                  // },
                  onDownload() {
                     let me = this;
                     var filter_ = "1 = 1";
                     filter_ = this.getFilterData(filter_);
                     console.log("download", filter_);
                     let param = {
                        sign: "md_org_data",
                        filename: '经销商新增导出' + String(new Date().getTime()),
                        filter: filter_,
                        orderby: "update_time desc",
                        token: Root.getToken()
                     }
                     me.textdownloadForm(param);
                  },
                  textdownloadForm(params) {//post文件流下载
                     let form = document.createElement('form');
                     form.id = 'form_download';
                     form.name = 'form_download';
                     document.body.appendChild(form);
                     //循环创建input框
                     for (let obj in params) {
                        if (params.hasOwnProperty(obj)) {
                           let input = document.createElement('input')
                           input.type = 'hidden'
                           input.name = obj;
                           input.value = params[obj]
                           form.appendChild(input)
                        }
                     };
                     form.method = 'post'; //请求方式
                     form.action = window.top.config.url_root + "root/exports/exportSheetsExcel?token=" + Root.getToken();
                     form.submit(); // form表单提交
                     document.body.removeChild(form); // 移除创建的元素
                  },
                  //信息修改
                  editPart() {
                     var me = this;
                     var row = me.selectedrow;
                     if(!row){
                        Root.message({
                           type: 'warning',
                           message: '请选择一条数据'
                        });
                        return;
                     }
                     var config = {
                        totab: false, //true: 以Tab导航的方式打开
                        width: "600px",
                        height: "200px",
                        icon: "icon-product",
                        text: "客户信息修改",
                        id: "customer_edit_part" + row.id,//totab: true时需设置,用于判断是否已打开此页面
                        url: "module/md/page/customer/page/customer_edit_part.html",
                        data: row,
                        delta: {},
                        sceneCode: "edit",//"refuseedit",//"approval", //"add"//"browse",
                        callback: function(obj, callback) {
                           me.onQuery();
                           if (callback) {
                              callback();
                           }
                        }
                     };
                     me.doPopupByPublic(config);
                  },
               }
            });
         };
         loadJsCss(function () {
            initVue();
         });
      </script>
   </head>
   <body style="margin: 0px;" >
      <div v-cloak id="vbody">
         <div id="page_root">
            <div class="topbar">
               <span :class="page_title == 'right' ? 'h_page_title_right' : 'h_page_title_left'"><span class="h_page_title_txt">{{title}}</span></span>
               <div :class="page_title == 'right' ? 'h_page_button_left' : 'h_page_button_right'">
                  <el-button-group style="margin-left: 3px;">
                     <el-button v-show="cbuttons_r.BSEdit" :disabled="!(selectedrow.id )" @click="editPart">信息修改</el-button>
                     <el-button v-show="cbuttons_r.adminEdit" :disabled="!(selectedrow.id )" @click="editData('adminedit')">管理员修改</el-button>
                     <el-button v-show="cbuttons_r.Add" @click="addCustomer" :icon="buttonsconfig.add.icon">{{buttonsconfig.add.name}}</el-button>
                     <el-button v-show="cbuttons_r.Edit" :disabled="!(selectedrow.id && (!selectedrow.state_code || selectedrow.state_code == 'Input'))" @click="editData('edit') " :icon="buttonsconfig.alter.icon":icon="buttonsconfig.alter.icon">{{buttonsconfig.alter.name}}</el-button>
                     <!-- <el-button v-show="cbuttons_r.Edit" :disabled="!(selectedrow.id && selectedrow.state_code && (selectedrow.state_code == 'WaitOpen' || selectedrow.state_code == 'Open' || selectedrow.state_code == 'Close'))" @click="changeData()" :icon="buttonsconfig.change.icon":icon="buttonsconfig.change.icon">{{buttonsconfig.change.name}}</el-button> -->
                  </el-button-group>
                  <el-button-group style="margin-left: 3px;">
                     <el-button v-show="cbuttons_r.Submit" :disabled="!(selectedrow.id && (!selectedrow.state_code || selectedrow.state_code == 'Input' || selectedrow.state_code == 'Close'))" type="success" @click="dataSubmit" :icon="buttonsconfig.submit.icon">提交</el-button>
                     <!-- @click="dataSubmit" -->
                  </el-button-group>
                  <el-button v-show="cbuttons_r.export ? cbuttons_r.export : false" @click="onDownload" :icon="buttonsconfig.export.icon">{{buttonsconfig.export.name}}</el-button>
                  <!-- <el-button-group style="margin-left: 3px;">
                     <el-button v-show="cbuttons_r.Export" disabled :icon="buttonsconfig.export.icon">{{buttonsconfig.export.name}}</el-button>
                  </el-button-group> -->
               </div>
            </div>
            <div class="h_dialog__body">
               <h-table
                  v-if="isRefresh"
                  ref="table1"
                  :table-fields="tableFields"
                  :table-data="tableData"
                  :is-edit-table-data="isEditTableData"
                  :table-field-click="tablefieldClick"
                  :pagesize="pagesize"
                  :pagenum="pagenum"
                  :total="total"
                  :table-height="tableHeight"
                  :is-highlight-row="true"
                  :isdraggableorder="cbuttons_r.Set"
                  v-on:get-data="getData"
                  v-on:cell-click="cellClick"
                  v-on:row-click="rowClick"
                  v-on:order-fields="orderTableFields"
               >
               </h-table>
               <!-- v-on:edit-data="editData"
               v-on:del-data="delData" -->
            </div>
         </div>
      </div>
      <div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 50vh;">
         <div class="spinner">
           <div class="cube1"></div>
           <div class="cube2"></div>
         </div>
      </div>
      <style>
         [v-cloak] {
            display: none !important;
         }
         .prefixclass {
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: #e6372b;
            display: inline-block;
         }
      </style>
   </body>
</html>