location_flag.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <template>
  2. <div class="localtion-falg">
  3. <div class="select-flag dcenter">
  4. <el-tag class="localtion-tag" @close="delTags(item)" :key="index" color="#FFF6E7" type="warning" size="small" v-for="(item,index) in localtionArr" closable>{{item}}</el-tag>
  5. </div>
  6. <div class="localtion-do-point dcenter pointer">更多可用标签</div>
  7. <div class="localtion-view">
  8. <div class="location-tag-view">
  9. <el-tag @click="addToActive(item.Name)" :key="index" class="default-tag pointer" v-for="(item,index) in queryLocaltionArr" size="small" color="#fff">{{item.Name}}</el-tag>
  10. </div>
  11. </div>
  12. <div class="center" style="margin-top:10px">
  13. <el-input v-model="localtionName" style="width:200px;margin-right:10px;"></el-input>
  14. <el-button type="primary" @click="addLocaltion">新增标签</el-button>
  15. </div>
  16. </div>
  17. </template>
  18. <script>
  19. import {
  20. mapGetters,
  21. mapActions
  22. } from "vuex";
  23. import {
  24. queryLocaltionFlag,
  25. updateLocaltionFlag,
  26. delLocaltionFlag,
  27. addLocaltionFlag
  28. } from "@/fetch/point_http"
  29. export default {
  30. name: 'localtion-flag',
  31. props: {
  32. renderData: {
  33. type: Object,
  34. default:function(){
  35. return {
  36. LocationFlag: []
  37. }
  38. }
  39. }
  40. },
  41. data() {
  42. return {
  43. localtionArr: [],
  44. localtionName: "",
  45. queryLocaltionArr: []
  46. }
  47. },
  48. computed: {
  49. ...mapGetters("project", [
  50. "datasourceId",
  51. "protocolType"
  52. ]),
  53. projectId () {
  54. return this.$store.getters['layout/projectId']
  55. }
  56. },
  57. created() {},
  58. mounted() {
  59. this.queryData()
  60. this.changeData()
  61. },
  62. methods: {
  63. //将标签添加到活跃标签中
  64. addToActive(val){
  65. console.log(val)
  66. this.localtionArr.push(val)
  67. this.changeTags()
  68. },
  69. //删除已有标签
  70. delTags(val){
  71. this.localtionArr = this.localtionArr.map(item => {
  72. if(item == val){
  73. return undefined
  74. }else{
  75. return item
  76. }
  77. }).filter(d => d);
  78. console.log(this.localtionArr)
  79. this.changeTags()
  80. },
  81. changeTags(){
  82. // this.renderData.LocationFlag = this.localtionArr
  83. this.$emit("changeTag",this.localtionArr)
  84. },
  85. queryData(){
  86. queryLocaltionFlag({},res => {
  87. console.log(res)
  88. this.queryLocaltionArr = res.Content
  89. })
  90. },
  91. //添加位置标签
  92. addLocaltion(){
  93. let param = {
  94. Name: this.localtionName.trim()
  95. }
  96. if(!param.Name){
  97. this.$message("请确定输入字符不为空")
  98. return false
  99. }
  100. addLocaltionFlag(param,res => {
  101. this.queryData()
  102. this.$message.success("添加成功")
  103. this.localtionName = ""
  104. })
  105. },
  106. changeData(){
  107. this.localtionArr = this.renderData.LocationFlag ? this.renderData.LocationFlag.map(item => {
  108. return item
  109. }) : []
  110. }
  111. },
  112. watch: {
  113. renderData: {
  114. deep: true,
  115. handler: function(){
  116. this.changeData()
  117. }
  118. }
  119. }
  120. }
  121. </script>
  122. <style lang="scss" scoped>
  123. .localtion-falg{
  124. height: 300px;
  125. overflow: hidden;
  126. .select-flag{
  127. height: 80px;
  128. width: 540px;
  129. line-height: 40px;
  130. border-bottom: 1px solid #DEE3F3;
  131. overflow-y: auto;
  132. }
  133. .localtion-do-point{
  134. height: 30px;
  135. width: 112px;
  136. line-height: 30px;
  137. background-color: #EEFAFF;
  138. font-size: 12px;
  139. color: #8E9CC1;
  140. text-align: center;
  141. }
  142. .localtion-tag{
  143. border-radius: 100px;
  144. color: #F5A623;
  145. border-color: #F5A623;
  146. margin-right: 10px;
  147. }
  148. .localtion-view{
  149. height: 115px;
  150. margin-top: 10px;
  151. .location-tag-view{
  152. margin-left: 20px;
  153. height: 100%;
  154. overflow-y: auto;
  155. .default-tag{
  156. border-color: #C2CEDB;
  157. color:#8E9CC1;
  158. border-radius: 100px;
  159. margin-right: 10px;
  160. }
  161. }
  162. }
  163. }
  164. </style>