apply-clients 3.4.2 → 3.4.4

package/src/components/android/TaskGraph.vue

@@ -1,125 +1,125 @@
-<template>
-  <div>
-    <div :style="'height:' + AmapHeight">
-      <AMap-location
-        :islocation="true"
-        :locationzoomcenter="false"
-        :usenative="true"
-        :isshowsearch="false"
-        :mylocationinfo="false"
-        :islocationclearmark="false"
-        :isshowmapmodel="false"
-        :locationwindow="false"
-        mapmodel="dragMarker"
-        :labelmarksarray="labelmarksarray"
-        @diyspotmouseclick="diyspotmouseclick"
-      ></AMap-location>
-    </div>
-    <div class="auto row" v-if="selectdata">
-      <div class="col-sm-12 col-xs-12 form-group app-input" style="margin-top: 10px"></div>
-      <template v-for="item in fileds">
-        <div class="col-sm-12 col-xs-12 form-group app-input">
-          <label class="">{{ item.label }}</label>
-          <div :class="item.type === 'tel' || item.type === 'map' ? 'col-sm-8 col-xs-8' : 'col-sm-8 col-xs-9'">
-            <input style="width: 100%" type="text" placeholder="" v-model="selectdata[item.field]" :value="selectdata[item.field]" readonly>
-            <svg v-if="item.type === 'tel'" @click.prevent="dialNumber(selectdata[item.field])" style="width: 25px;height: 25px;position: absolute;bottom: 8px;" t="1628575136009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2374" width="200" height="200"><path d="M682.25 465.262c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811A167.395 167.395 0 0 0 570.96 298.35c-16.695 0-27.811 11.116-27.811 27.811s11.16 27.812 27.811 27.812a111.597 111.597 0 0 1 111.29 111.289z m111.289 0c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811c0-152.984-125.217-278.201-278.2-278.201-16.696 0-27.812 11.16-27.812 27.855s11.16 27.811 27.811 27.811c122.405 0 222.579 100.174 222.579 222.535zM417.976 367.9c30.623-30.579 33.391-77.898 5.58-111.289L337.31 148.134c-27.811-36.16-80.666-41.74-116.869-13.928-2.768 2.812-5.536 2.812-5.536 5.58l-75.13 75.13c-72.318 72.318 30.623 267.041 217.042 453.417C543.15 854.708 735.06 954.88 807.378 885.33l75.13-75.13c33.392-33.391 33.392-86.246 0-116.825l-5.536-5.58-108.52-86.246c-33.348-27.81-80.623-25.043-111.246 5.58l-47.275 47.319c-50.087-30.623-94.593-64.014-133.564-102.941-38.927-38.971-72.275-83.478-102.898-133.565l44.507-50.043z m-38.927-75.13c8.348 11.16 8.348 27.855-2.812 36.203l-61.202 63.97a29.569 29.569 0 0 0-5.536 33.392 721.425 721.425 0 0 0 122.405 164.1 721.512 721.512 0 0 0 164.1 122.405 29.569 29.569 0 0 0 33.39-5.58l63.971-63.97c11.16-11.116 25.043-11.116 36.203-2.769l108.477 89.014s2.768 0 2.768 2.768a26.889 26.889 0 0 1 0 38.971l-75.13 75.13c-36.115 36.115-208.606-55.666-372.75-217.042-164.1-161.332-253.114-336.548-216.955-372.75l77.854-77.899c11.16-8.348 30.623-8.348 38.971 5.58l86.246 108.521z" fill="#8A8A8A" p-id="2375"></path></svg>
-            <svg v-if="item.type === 'map'" @click="openAmap(selectdata[item.field])" style="width: 25px;height: 25px;position: absolute;bottom: 8px;" t="1628575336648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3201" width="200" height="200"><path d="M512 956h-1.1c-10.9 0-20.5-6.9-24.7-17L369.9 654.1 85 537.8c-10.1-4.1-16.8-13.7-17.2-24.6-0.4-10.9 5.6-21 15.3-25.9l833-416.5c10.7-5.3 23.6-3.2 32.1 5.2s10.5 21.4 5.2 32.1L536.8 940.9c-4.7 9.4-14.3 15.1-24.8 15.1zM162.7 509.6l239 97.6c6.9 2.8 12.4 8.3 15.2 15.2l97.6 239 351.9-703.8-703.7 352z" fill="#666666" p-id="3202"></path></svg>
-          </div>
-        </div>
-      </template>
-      <div class="col-sm-12 col-xs-12 form-group app-btn">
-        <button class="btn btn-info" @click.prevent="click()">查看详情</button>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import Vue from 'vue'
-export default {
-  title: '地图任务点',
-  props: {
-    data: {
-      type: Array,
-      default: []
-    },
-    fileds: {
-      type: Array,
-      default: []
-    }
-  },
-  data () {
-    return {
-      labelmarksarray: [],
-      selectdata: null,
-      AmapHeight: '100%'
-    }
-  },
-  ready () {
-    this.getLocatingPoint()
-  },
-  methods: {
-    // 查看详情
-    click () {
-      let _this = this
-      this.$dispatch('gotoson', {
-        _this: _this,
-        title: _this.selectdata.defname,
-        safe: true
-      })
-      this.$goto('app-service-control', {selectdata: _this.selectdata}, 'self', null)
-    },
-    // 导航
-    openAmap (address) {
-      let _this = this
-      HostApp.openThirdPartyMap({
-        lon: _this.selectdata.f_longitude,
-        lat: _this.selectdata.f_dimension,
-        address: address
-      })
-    },
-    // 拨打电话
-    dialNumber (tel) {
-      this.$showMessage(`是否拨打电话：${tel}`, ['confirm']).then((res) => {
-        if (res === 'confirm') {
-          this.$androidUtil.makeAPhoneCall(tel)
-        }
-      })
-    },
-    // 点击定位点回调
-    diyspotmouseclick (data) {
-      this.AmapHeight = '60%'
-
-      this.selectdata = data
-    },
-    // 获取定位点
-    getLocatingPoint () {
-      this.data.forEach(item => {
-        this.labelmarksarray.push({
-          data: {
-            data: item,
-            content: item.f_user_name
-          },
-          position: [item.f_longitude, item.f_dimension],
-          isclearmarker: false,
-          islabel: false
-        })
-      })
-    }
-  },
-  events: {
-  },
-  watch: {
-    'data' () {
-      this.getLocatingPoint()
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  .app-input {
-    label {
-      float: left;
-    }
-  }
-</style>
+<template>
+  <div>
+    <div :style="'height:' + AmapHeight">
+      <AMap-location
+        :islocation="true"
+        :locationzoomcenter="false"
+        :usenative="true"
+        :isshowsearch="false"
+        :mylocationinfo="false"
+        :islocationclearmark="false"
+        :isshowmapmodel="false"
+        :locationwindow="false"
+        mapmodel="dragMarker"
+        :labelmarksarray="labelmarksarray"
+        @diyspotmouseclick="diyspotmouseclick"
+      ></AMap-location>
+    </div>
+    <div class="auto row" v-if="selectdata">
+      <div class="col-sm-12 col-xs-12 form-group app-input" style="margin-top: 10px"></div>
+      <template v-for="item in fileds">
+        <div class="col-sm-12 col-xs-12 form-group app-input">
+          <label class="">{{ item.label }}</label>
+          <div :class="item.type === 'tel' || item.type === 'map' ? 'col-sm-8 col-xs-8' : 'col-sm-8 col-xs-9'">
+            <input style="width: 100%" type="text" placeholder="" v-model="selectdata[item.field]" :value="selectdata[item.field]" readonly>
+            <svg v-if="item.type === 'tel'" @click.prevent="dialNumber(selectdata[item.field])" style="width: 25px;height: 25px;position: absolute;bottom: 8px;" t="1628575136009" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2374" width="200" height="200"><path d="M682.25 465.262c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811A167.395 167.395 0 0 0 570.96 298.35c-16.695 0-27.811 11.116-27.811 27.811s11.16 27.812 27.811 27.812a111.597 111.597 0 0 1 111.29 111.289z m111.289 0c0 16.695 11.115 27.811 27.81 27.811s27.812-11.116 27.812-27.811c0-152.984-125.217-278.201-278.2-278.201-16.696 0-27.812 11.16-27.812 27.855s11.16 27.811 27.811 27.811c122.405 0 222.579 100.174 222.579 222.535zM417.976 367.9c30.623-30.579 33.391-77.898 5.58-111.289L337.31 148.134c-27.811-36.16-80.666-41.74-116.869-13.928-2.768 2.812-5.536 2.812-5.536 5.58l-75.13 75.13c-72.318 72.318 30.623 267.041 217.042 453.417C543.15 854.708 735.06 954.88 807.378 885.33l75.13-75.13c33.392-33.391 33.392-86.246 0-116.825l-5.536-5.58-108.52-86.246c-33.348-27.81-80.623-25.043-111.246 5.58l-47.275 47.319c-50.087-30.623-94.593-64.014-133.564-102.941-38.927-38.971-72.275-83.478-102.898-133.565l44.507-50.043z m-38.927-75.13c8.348 11.16 8.348 27.855-2.812 36.203l-61.202 63.97a29.569 29.569 0 0 0-5.536 33.392 721.425 721.425 0 0 0 122.405 164.1 721.512 721.512 0 0 0 164.1 122.405 29.569 29.569 0 0 0 33.39-5.58l63.971-63.97c11.16-11.116 25.043-11.116 36.203-2.769l108.477 89.014s2.768 0 2.768 2.768a26.889 26.889 0 0 1 0 38.971l-75.13 75.13c-36.115 36.115-208.606-55.666-372.75-217.042-164.1-161.332-253.114-336.548-216.955-372.75l77.854-77.899c11.16-8.348 30.623-8.348 38.971 5.58l86.246 108.521z" fill="#8A8A8A" p-id="2375"></path></svg>
+            <svg v-if="item.type === 'map'" @click="openAmap(selectdata[item.field])" style="width: 25px;height: 25px;position: absolute;bottom: 8px;" t="1628575336648" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3201" width="200" height="200"><path d="M512 956h-1.1c-10.9 0-20.5-6.9-24.7-17L369.9 654.1 85 537.8c-10.1-4.1-16.8-13.7-17.2-24.6-0.4-10.9 5.6-21 15.3-25.9l833-416.5c10.7-5.3 23.6-3.2 32.1 5.2s10.5 21.4 5.2 32.1L536.8 940.9c-4.7 9.4-14.3 15.1-24.8 15.1zM162.7 509.6l239 97.6c6.9 2.8 12.4 8.3 15.2 15.2l97.6 239 351.9-703.8-703.7 352z" fill="#666666" p-id="3202"></path></svg>
+          </div>
+        </div>
+      </template>
+      <div class="col-sm-12 col-xs-12 form-group app-btn">
+        <button class="btn btn-info" @click.prevent="click()">查看详情</button>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import Vue from 'vue'
+export default {
+  title: '地图任务点',
+  props: {
+    data: {
+      type: Array,
+      default: []
+    },
+    fileds: {
+      type: Array,
+      default: []
+    }
+  },
+  data () {
+    return {
+      labelmarksarray: [],
+      selectdata: null,
+      AmapHeight: '100%'
+    }
+  },
+  ready () {
+    this.getLocatingPoint()
+  },
+  methods: {
+    // 查看详情
+    click () {
+      let _this = this
+      this.$dispatch('gotoson', {
+        _this: _this,
+        title: _this.selectdata.defname,
+        safe: true
+      })
+      this.$goto('app-service-control', {selectdata: _this.selectdata}, 'self', null)
+    },
+    // 导航
+    openAmap (address) {
+      let _this = this
+      HostApp.openThirdPartyMap({
+        lon: _this.selectdata.f_longitude,
+        lat: _this.selectdata.f_dimension,
+        address: address
+      })
+    },
+    // 拨打电话
+    dialNumber (tel) {
+      this.$showMessage(`是否拨打电话：${tel}`, ['confirm']).then((res) => {
+        if (res === 'confirm') {
+          this.$androidUtil.makeAPhoneCall(tel)
+        }
+      })
+    },
+    // 点击定位点回调
+    diyspotmouseclick (data) {
+      this.AmapHeight = '60%'
+
+      this.selectdata = data
+    },
+    // 获取定位点
+    getLocatingPoint () {
+      this.data.forEach(item => {
+        this.labelmarksarray.push({
+          data: {
+            data: item,
+            content: item.f_user_name
+          },
+          position: [item.f_longitude, item.f_dimension],
+          isclearmarker: false,
+          islabel: false
+        })
+      })
+    }
+  },
+  events: {
+  },
+  watch: {
+    'data' () {
+      this.getLocatingPoint()
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .app-input {
+    label {
+      float: left;
+    }
+  }
+</style>

package/src/components/common/TabButton.vue

@@ -0,0 +1,149 @@
+<template>
+  <div class='flex foot_tabset1'>
+    <!-- Nav tabs -->
+    <ul class="nav nav-{{navStyle}}" role="tablist" style="margin-left: 1%">
+      <li style="margin-right: 10px"
+          :id="'vc-tabset-li-'+attach +'-'+$index"
+          v-for="r in renderData"
+          @click.prevent="handleTabListClick($index, r)"
+          :disabled="r.disabled"
+      >
+        <button class="button_new" style="width: max-content" v-bind:class="{
+            'btn-succ': ($index === active),
+            'disabled': r.disabled
+          }">
+          <slot name="header">
+            {{r.header}}
+          </slot>
+          <!-- 关闭按钮 -->
+          <span class="glyphicon glyphicon-remove" style="margin-left: 15px;" @click="deletetTab(r)" v-if="close" :id="'vc-tabset-close-'+attach +'-'+$index"></span>
+        </button>
+
+      </li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content span" v-el:tab-content>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {remove} from 'vue-client/src/stores/Remove.js'
+
+  export default {
+    props: {
+      navStyle: {
+        type: String,
+        default: 'tabs'
+      },
+      effect: {
+        type: String,
+        default: 'fadein'
+      },
+      active: {
+        type: Number,
+        default: 0
+      },
+      close: {
+        type: Boolean,
+        default: false
+      },
+      attach: {
+        type: String,
+        default: 'vuestrap'
+      },
+      content: {}
+    },
+    ready () {
+      remove.$on('remove', (name) => {
+        console.log('tabset收$on 到的名字为：', name)
+        this.$removeTab(name)
+      })
+    },
+    data () {
+      return {
+        // 数据格式：{comp, header，disabled}
+        // - comp: 当前页签对应的tab组件
+        renderData: []
+      }
+    },
+    methods: {
+      handleTabListClick (index, el) {
+        this.$parent.show[index] = true
+        if (el.comp._scope && el.comp._scope.tab) {
+          this.$dispatch('tab-changed', el.comp._scope.tab.comp.name)
+        }
+        if (!el.disabled) this.active = index
+      },
+      // deletetab函数为自己添加
+      deletetTab (el) {
+        this.$removeTab(el.comp._scope.tab.comp.name)
+        remove.$emit('delete', el.comp._scope.tab.comp.name)
+      },
+      // 根据删除也下标，修改所有页签的下标
+      modifyAllIndex (index) {
+        let cur = this.active
+        this.$nextTick(() => {
+          // 关闭页签以后的多有页签的的下标向前挪动一位,之前的页签不动
+          for (var i = index; i < this.renderData.length; i++) {
+            this.renderData[i].comp.index -= 1
+          }
+          // 修改激活页
+          // 获取当前激活页签下标，关闭在当前激活页之后（包含当前激活页），当前激活页下标不变
+          // 当关闭当前激活页之前（激活页向前移动一位）
+          if (this.active > index || this.active === this.renderData.length) {
+            this.active = cur - 1
+          } else if (cur === 0) {
+            this.active = 0
+          } else {
+            this.active = cur
+          }
+          if (this.active === -1) {
+            this.$dispatch('tab-changed', null)
+          } else {
+            this.$dispatch('tab-changed', this.renderData[this.active].comp._scope.tab.comp.name)
+          }
+        })
+      }
+    },
+    events: {
+      'delete' (index) {
+        this.modifyAllIndex(index)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  ul > li > a {
+    position: relative;
+  }
+  ul > li > a > span {
+    display: none;
+  }
+  /*ul > li > a:hover > span {*/
+  /*display: initial;*/
+  /*position: absolute;*/
+  /*right: 0;*/
+  /*top: 35%;*/
+  /*border: 1px solid #EAEAEA;*/
+  /*}*/
+  /*ul > li > a:hover > span:hover {*/
+  /*border: 1px solid #EAEAEA;*/
+  /*color: #5cb95c;*/
+  /*}*/
+  ul > li > button {
+    background-color: #FFFFFF;
+    border-radius: 4px;
+    color: #999;
+    border: 1px solid #5cb95c;
+  }
+  .btn-succ{
+    background-color: #6aa6e2;
+    border-radius: 4px;
+    color: #fff;
+  }
+
+</style>

package/src/components/common/Tabs.vue

@@ -0,0 +1,67 @@
+<template>
+  <div role="tabpanel" class="tab-pane"
+       v-bind:class="{hide:!show}"
+       v-if="show"
+       :transition="transition"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+  import coerceBoolean from 'vue-client/src/vue-strap/src/utils/coerceBoolean.js'
+
+  export default {
+    props: {
+      header: {
+        type: String
+      },
+      disabled: {
+        type: Boolean,
+        coerce: coerceBoolean,
+        default: false
+      }
+    },
+    data () {
+      return {
+        index: 0,
+        show: false
+      }
+    },
+    watch: {
+      'header' (val) {
+        // header变化时，通知tabset
+        let data = this.$parent.renderData.find((v) => v.comp === this)
+        data.header = val
+      }
+    },
+    computed: {
+      show () {
+        return (this.$parent.active === this.index)
+      },
+      transition () {
+        return this.$parent.effect
+      }
+    },
+    created () {
+      this.$parent.renderData.push({
+        comp: this,
+        header: this.header,
+        disabled: this.disabled
+      })
+    },
+    ready () {
+      // 找到当前tab的索引
+      this.index = this.$parent.$children.findIndex((v) => v.$el === this.$el)
+    },
+    beforeDestroy () {
+      this.$parent.renderData.splice(this.index, 1)
+    }
+  }
+</script>
+
+<style scoped>
+  .tab-content > .tab-pane {
+    display: block;
+  }
+</style>