app-customize.vue 9.3 KB
Newer Older
KK's avatar
KK committed
1
<template>
KK's avatar
KK committed
2 3 4 5 6 7 8 9 10 11 12 13 14
  <ion-page :className="{ 'view-container': true, 'default-mode-view': true }">
    <ion-header v-if="titleStatus">
      <ion-toolbar class="ionoc-view-header">
        <ion-buttons slot="start">
          <ion-button @click="closeView">
            <ion-icon name="chevron-back"></ion-icon>
            {{$t('app.button.back')}}
          </ion-button>
        </ion-buttons>
        <ion-title class="view-title">
          <label class="title-label">自定义仪表盘</label>
        </ion-title>
      </ion-toolbar>
KK's avatar
KK committed
15 16
    </ion-header>
    <ion-content>
KK's avatar
KK committed
17 18 19 20 21 22 23 24
      <div class="drag-list">
        <div class="drag-list-item added">
          <div class="header">已经添加的卡片</div>
          <draggable v-model="selectedData" handle=".end" :animation="200" @end="dragEnd">
            <div class="content" v-for="item in selectedData" :key="item.componentName">
              <div class="start" @click="delteItem(item.id)">
                <ion-icon name="remove-circle-outline"></ion-icon>
              </div>
KK's avatar
KK committed
25
              <div class="drag-list-pic"><img  :src="item.detailImage?item.detailImage:'assets/images/add-task-list-card.jpg'" alt=""></div>
KK's avatar
KK committed
26
              <div class="drag-list-text">
KK's avatar
KK committed
27
                <div><span v-if="item.customizeTitle">{{item.customizeTitle}}</span><span v-else>{{item.portletName}}</span></div>
KK's avatar
KK committed
28 29 30 31 32 33 34 35
                <div v-if="item.detailText">{{item.detailText}}</div>
                <div v-else>暂无描述</div>
              </div>
              <div class="end">
                <ion-icon name="drag-point"></ion-icon>
              </div>
            </div>
          </draggable>
KK's avatar
KK committed
36 37
        </div>

KK's avatar
KK committed
38 39 40 41 42 43 44
        <div class="drag-list-item add">
          <div class="header">可添加的卡片</div>
          <template v-for="item in selectData">
            <div class="content" v-if="item.componentName" :key="item.componentName">
              <div class="start" @click="addItem(item.id)">
                <ion-icon name="add-circle-outline"></ion-icon>
              </div>
KK's avatar
KK committed
45
              <div class="drag-list-pic"><img  :src="item.detailImage?item.detailImage:'assets/images/add-task-list-card.jpg'" alt=""></div>
KK's avatar
KK committed
46 47 48 49 50 51 52 53 54 55
              <div class="drag-list-text">
                <div>{{item.portletName}}</div>
                <div v-if="item.detailText">{{item.detailText}}</div>
                <div v-else>暂无描述</div>
              </div>
              <div class="end">
                <!-- <ion-icon v-show="false" name="drag-point"></ion-icon> -->
              </div>
            </div>
          </template>
KK's avatar
KK committed
56
        </div>
KK's avatar
KK committed
57 58 59
      </div>
    </ion-content>
  </ion-page>
KK's avatar
KK committed
60 61 62 63 64 65 66 67 68
</template>

<script lang="ts">
import {
  Vue,
  Component,
  Prop,
  Provide,
  Emit,
KK's avatar
KK committed
69
  Watch,
KK's avatar
KK committed
70
} from "vue-property-decorator";
KK's avatar
KK committed
71 72
import draggable from "vuedraggable";
import { Http } from "@/ibiz-core/utils";
KK's avatar
KK committed
73 74 75
@Component({
  components: {
    draggable,
KK's avatar
KK committed
76
  },
KK's avatar
KK committed
77
})
KK's avatar
KK committed
78
export default class AppCustomize extends Vue {
KK's avatar
KK committed
79

KK's avatar
KK committed
80 81 82 83 84 85 86
    /**
     * 已添加数据
     *
     * @type {Array}
     * @memberof AppCustomize
     */
    public selectedData?: any = [];
KK's avatar
KK committed
87

KK's avatar
KK committed
88 89 90 91 92 93 94 95 96 97

    public selectMode = [];

    /**
     * 视图参数
     *
     * @type {string}
     * @memberof AppCustomize
     */
    @Prop() protected _viewparams!: string;
KK's avatar
KK committed
98

99 100 101 102 103
    /**
     * 工具服务对象
     *
     * @protected
     * @type {UtilService}
KK's avatar
KK committed
104
     * @memberof AppCustomize
105
     */
KK's avatar
KK committed
106
    protected utilService:any =  window.utilServiceConstructor;
107

KK's avatar
KK committed
108 109 110 111 112 113 114
    /**
     * 传入数据list_add
     *
     * @type {Array}
     * @memberof AppCustomize
     */
    public selectData?: any = [];
KK's avatar
KK committed
115

KK's avatar
KK committed
116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132
    /**
     * 减少item
     *
     * @returns {void}
     * @memberof AppCustomize
     */
    public delteItem(id: any) {
        let item: any = this.selectedData.find((v: any) => v.id === id);
        let length: number = this.selectData.length;
        item.id = length + 1;
        this.selectedData.splice(id - 1, 1);
        this.selectedData.forEach((v: any, i: any) => {
        v.id = i + 1;
        });
        this.selectData.push(item);
        this.customizeChange();
    }
KK's avatar
KK committed
133

KK's avatar
KK committed
134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150
    /**
     * 添加item
     *
     * @returns {void}
     * @memberof AppCustomize
     */
    public addItem(id: any) {
        let item: any = this.selectData.find((v: any) => v.id === id);
        let length: number = this.selectedData.length;
        item.id = length + 1;
        this.selectData.splice(id - 1, 1);
        this.selectData.forEach((v: any, i: any) => {
        v.id = i + 1;
        });
        this.selectedData.push(item);
        this.customizeChange();
    }
KK's avatar
KK committed
151

KK's avatar
KK committed
152 153 154 155 156 157 158
    /**
     * 标题显示状态
     *
     * @returns {void}
     * @memberof AppCustomize
     */
    public titleStatus = true;
KK's avatar
KK committed
159

KK's avatar
KK committed
160 161 162 163 164 165 166 167 168
    /**
     * 拖拽结束
     *
     * @returns {void}
     * @memberof AppCustomize
     */
    public dragEnd() {
        this.customizeChange();
    }
KK's avatar
KK committed
169

KK's avatar
KK committed
170 171 172 173 174 175 176 177 178 179 180 181
    /**
     * 监听selectedData
     *
     * @returns {void}
     * @memberof AppCustomize
     */
    @Watch("selectedData", { immediate: true, deep: true })
    onSelectedDataChange() {
        this.selectedData.forEach((item: any, index: number) => {
          item.id = index + 1;
        });
    }
KK's avatar
KK committed
182

KK's avatar
KK committed
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233
    /**
     * 监听selectData
     *
     * @returns {void}
     * @memberof AppCustomize
     */
    @Watch("selectData", { immediate: true, deep: true })
    onSelectDataChange() {
        this.selectData.forEach((item: any, index: number) => {
          item.id = index + 1;
        });
    }

    /**
     * 生命周期created
     *
     * @returns {void}
     * @memberof AppCustomize
     */
    public created() {
        this.loadPortletList({}, {});
        this.thirdPartyInit();
    }

    /**
     * 获取可添加仪表盘数据
     *
     * @memberof AppCustomize
     */
    public loadPortletList(context: any, viewparams: any): Promise<any> {
        return new Promise((resolve: any, reject: any) => {
        Http.getInstance()
            .get("./assets/json/portlet-data.json")
            .then((response: any) => {
            if (response && response.status === 200 && response.data) {
                let result: Array<any> = [];
                if (typeof response.data == "string") {
                const index: number = response.data.lastIndexOf(",");
                result = JSON.parse(response.data);
                } else {
                result = response.data;
                }
                this.parseData(result);
                resolve({ data: result });
            }
            })
            .catch((response: any) => {
            console.log(response);
            });
        });
    }
KK's avatar
KK committed
234 235

  /**
KK's avatar
KK committed
236
   *  第三方容器初始化
KK's avatar
KK committed
237
   *
KK's avatar
KK committed
238 239
   * @type {function}
   * @memberof AppRichTextEditor
KK's avatar
KK committed
240
   */
KK's avatar
KK committed
241 242 243 244 245 246 247
  protected  thirdPartyInit(){
        this.$viewTool.setViewTitleOfThirdParty("自定义仪表盘");
        this.$viewTool.setThirdPartyEvent(this.closeView);
        const thirdPartyName = this.$store.getters.getThirdPartyName();
        if(thirdPartyName){
            this.titleStatus = false;
        }
KK's avatar
KK committed
248 249
  }

KK's avatar
KK committed
250 251 252 253 254 255 256 257 258 259
    /**
     * 解析data
     *
     * @memberof AppCustomize
     */
    public parseData(data: any) {
        this.selectMode.forEach((i: any, ins: number) => {
        data.forEach((item: any, index: number) => {
            if (i.componentName == item.componentName) {
            data.splice(index, 1);
260
            }
KK's avatar
KK committed
261 262 263 264 265
        });
        });
        this.selectData = data;
        this.selectedData = this.selectMode;
    }
KK's avatar
KK committed
266 267 268 269 270

    /**
     * modleId
     *
     * @type {string}
KK's avatar
KK committed
271
     * @memberof AppCustomize
KK's avatar
KK committed
272
     */
KK's avatar
KK committed
273
    public modelId: string = "";
KK's avatar
KK committed
274 275 276 277 278

    /**
     * 功能服务名称
     *
     * @type {string}
KK's avatar
KK committed
279
     * @memberof AppCustomize
KK's avatar
KK committed
280
     */
KK's avatar
KK committed
281
    public utilServiceName: string = "";
KK's avatar
KK committed
282

KK's avatar
KK committed
283 284 285 286 287 288 289 290 291 292 293 294 295 296 297
    /**
     * customizeChange
     * 
     * @memberof AppCustomize
     */
    public customizeChange() {
        this.saveModel(
        this.utilServiceName,
        {},
        {
            utilServiceName: this.utilServiceName,
            modelid: this.modelId,
            model: this.selectedData,
        }
        );
KK's avatar
KK committed
298
    }
299

KK's avatar
KK committed
300 301 302 303 304 305 306 307 308 309 310 311 312
    /**
     * 生命周期钩子
     * 
     * @memberof AppCustomize
     */
    public mounted() {
        let parm: any = JSON.parse(this._viewparams);
        if (parm) {
        this.modelId = parm.modelId ? parm.modelId : "";
        this.utilServiceName = parm.utilServiceName ? parm.utilServiceName : "";
        this.selectMode = parm.selectMode ? parm.selectMode : "";
        }
    }
313

KK's avatar
KK committed
314 315 316 317 318 319 320 321
    /**
     * 关闭视图
     * 
     * @memberof AppCustomize
     */
    public closeView() {
        this.$emit("close", [this.selectMode]);
    }
322 323 324 325 326 327 328 329 330 331 332 333

    /**
     * 保存模型
     *
     * @param {string} serviceName
     * @param {*} context
     * @param {*} viewparams
     * @returns
     * @memberof AppDashboardDesignService
     */
    public saveModel(serviceName: string, context: any, viewparams: any) {
        return new Promise((resolve: any, reject: any) => {
KK's avatar
KK committed
334 335 336 337 338 339 340 341 342
        this.utilService
            .getService(serviceName)
            .then((service: any) => {
            service
                .saveModelData(JSON.stringify(context), "", viewparams)
                .then((response: any) => {
                resolve(response);
                })
                .catch((response: any) => {
343
                reject(response);
KK's avatar
KK committed
344 345 346 347
                });
            })
            .catch((response: any) => {
            reject(response);
348 349 350
            });
        });
    }
KK's avatar
KK committed
351 352 353 354 355
}
</script>
<style lang = "less">
@import "./app-customize.less";
</style>