H5/pzhgt.git - Gitblit

<template>
  <v-tool-scroll ids="grid-index-add">
    <div class='m'>
      <section class="line">
        <p class="label">所属社区：</p>
        <article>
          <el-select v-model="os.gridCommunityId" size="mini"  placeholder="请选择社区">
            <el-option v-for="item in community" :key="item.communityId"
                       :label="item.name"
                       :value="item.communityId"></el-option>
          </el-select>
        </article>
      </section>
      <!---->
      <section class="line">
        <p class="label">关联市平台网格所在区域：</p>
        <article>
          <el-cascader
            v-model="street"
            :props="{
              label:'name',
              value:'id'
            }"
            size="mini"
            :options="options"
            @change="handleChange"></el-cascader>
        </article>
      </section>
      <!---->
      <section class="line">
        <p class="label">关联市平台网格：</p>
        <article>
          <el-select @change="setlcGr" v-model="os.lcGridId"  size="mini"  placeholder="请选择活动区域">
            <el-option v-for="item in grid" :key="item.id"
                       :label="item.name"
                       :value="item.id"></el-option>
          </el-select>
        </article>
      </section>
      <!---->
      <section class="line">
        <p class="label">网格名称：</p>
        <article>
          <input
            type="text"
            class="m_inp small"
            placeholder="请输入网格名称"
            maxlength="15"
            v-model="os.title"
          >
        </article>
      </section>
      <section class="line">
        <p class="label">网格描述(非必填)：</p>
        <article>
          <textarea
            cols="30"
            rows="10"
            class="m_inp small"
            placeholder="请输入网格描述"
            maxlength="100"
            v-model="os.desc"
          ></textarea>
        </article>
      </section>
      <section>
        <p class="label">网格面积：</p>
        <article>{{os.area}} m<b class="up">2</b></article>
      </section>
      <section class="line">
        <p class="label">网格员：</p>
        <article>
          <ul class="i">
            <li
              class="flex"
              v-for="(x,y) in change"
              :key="y+'-c-s'"
            >
              <select
                class="m_inp mini"
                v-model="x.id"
              >
                <option
                  :value="i.userId"
                  v-for="i in list"
                  :key="i.userId"
                  :disabled="cid.indexOf(i.userId)>=0"
                >{{i.nickName}}</option>
              </select>
              <span
                class="circle"
                @click="onDel(x)"
              ><i class="el-icon-minus"></i></span>
            </li>
          </ul>
        </article>
        <button
          class="m_btn mini r bgc_primary"
          @click="onAdd"
        >新增</button>
      </section>
      <section>
        <p class="label">网格颜色：</p>
        <article>
          <el-color-picker
            v-model="os.color"
            size="mini"
          ></el-color-picker>
          <p class="c">透明度</p>
          <el-slider
            v-model="os.opacity"
            :format-tooltip="formatTooltip"
          ></el-slider>
        </article>
      </section>
      <section>
        <p class="label">网格边框：</p>
        <article>
          <div class="flex q">
            <p class="c">颜色</p>
            <el-color-picker
              v-model="os.color2"
              size="mini"
            ></el-color-picker>
          </div>
          <div class="flex q">
            <p class="c">粗细</p>
            <select
              class="m_inp mini"
              v-model="os.px"
            >
              <option
                :value="i"
                v-for="i in 8"
                :key="i"
              >{{i}}榜</option>
            </select>
          </div>
        </article>
      </section>
      <section>
        <slot></slot>
      </section>
    </div>
  </v-tool-scroll>
</template>
 
<script>
export default {
  props: {
    area: { type: [String, Number], default: 0 },
    edit: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  components: {},
  data() {
    return {
      os: {
        area: "",
        desc: "",
        title: "",
        ids: [],
        color: null,
        opacity: 0,
        color2: null,
        px: 1,
        id: Date.now(),
        gridCommunityId:'',
        lcGridId:'',
        lcGridName:''//市平台网格关联名称
      },
      community:[],//社区列表
      options:[],
      street:'',
      grid:[],//所有关联市平台列表
      list: [],
      change: [],
    };
  },
  computed: {
    cid() {
      return this.change.map((r) => {
        return r.id;
      });
    },
  },
  inject: ["appObject"],
  watch: {
    cid: {
      handler(n) {
        this.os.ids = n;
      },
      deep: true,
    },
    os: {
      handler() {
        this.check();
      },
      deep: true,
    },
    area(n) {
      this.os.area = n;
    },
    edit: {
      handler() {
        this.setEdit();
      },
      deep: true,
    },
  },
  methods: {
    communityList(){
      //查询所有社区列表
      this.$api.get('eventgridmember/community/list','',e=>{
        // console.log(e)
        this.community = e
      })
    },
    setlcGr(e){
      //关联市平台网格  除了id还需要拿到name
      let i = this.grid.filter(item=>{
        return item.id ===e
      })
      this.os.lcGridName = i[0].name
    },
    recursion(list){
      //删除空 children
      list.map((item)=>{
        if(item.children.length!==0){
          this.recursion(item.children)
        }else{
          delete item.children
        }
      })
    },
    treeList(){
      // 查询西区所有关联市平台树形结构列表
      this.$api.get('eventgridmember/lc/grid/tree/list/noToken','',e=>{
        console.log(e);
        
        this.options = e
        this.options.map(item=>{
          this.recursion(item.children)
        })
      })
    },
    handleChange(e){
      //s树形结构
      this.gridList()
    },
    gridList(){
      //查询所有关联市平台列表
      let data = {
        areaId:this.street[this.street.length-1]
      }
      this.$api.get('eventgridmember/lc/grid/list/noToken',data,e=>{
        this.grid = e
      })
    },
    onAdd() {
      let c = this.change.filter((r) => {
        return !r.id;
      });
      if (c.length) return demo.toast("请选择网格员");
      this.change.push({ id: "" });
    },
    onDel(e) {
      this.change = this.change.filter((r) => {
        return r.id !== e.id;
      });
    },
    formatTooltip(val) {
      return val / 100;
    },
    check() {
      let ts = this;
      demo._timers(
        "grid-time",
        () => {
          let vv = ts.os;
          let oo = ts.appObject(vv, {
            ids: vv.ids.filter((r) => {
              return !!r;
            }),
          });
          this.$emit("on-value", oo);
        },
        0,
        1e3
      );
    },
    init() {
      this.$api.post("eventgridmember/member/list", {}, (e) => {
        // console.log(e);
        this.list = e.filter((r) => {
          return !!r.nickName;
        });
      });
    },
    setEdit() {
      if (!this.edit.id) return 0;
      let v = this.edit;
      this.change = (v.gridMembers || []).map((r) => {
        return { id: r.userId };
      });
      this.grid = [{
        name:v.lcGirdName,
        id:v.lcGirdId
      }]
       
      this.os = {
        area: v.area,
        desc: v.remarks,
        title: v.gridName,
        ids: (v.gridMembers || []).map((r) => {
          return r.userId;
        }),
        color: v.fillColor,
        opacity: 0,
        color2: v.lineColor,
        px: +v.lineBroadband,
        id: v.id,
        gridCommunityId:''+v.gridCommunityId,
        lcGridId:''+v.lcGirdId ,
        lcGirdName:''+v.lcGirdName
      };
    },
  },
  mounted() {
    demo.access("grid-time", null);
    this.init();
    this.setEdit();
    this.communityList()
    this.treeList()
    // this.gridList()
  },
};
</script>
<style lang='less' scoped>
.m {
  color: #fff;
  padding: 5px 10px;
  box-sizing: border-box;
  section {
    display: flex;
    position: relative;
    margin-bottom: 5px;
    line-height: 32px;
    .label {
      width: 100px;
      font-size: 16px;
    }
    article {
      width: calc(100% - 100px);
    }
    .r {
      position: absolute;
      right: 0;
      top: 4px;
      min-width: 60px;
    }
    .up {
      font-size: 12px;
      display: inline-block;
      transform: scale(0.8) translateY(-5px);
    }
    .c {
      font-size: 12px;
      line-height: 1.2;
    }
    .q {
      padding: 5px 0;
      p {
        line-height: 26px;
        padding-right: 8px;
      }
    }
    .i {
      li {
        box-sizing: border-box;
        padding-left: 10%;
        margin-bottom: 8px;
        select {
          flex: 1;
        }
        .circle {
          width: 24px;
          height: 24px;
          line-height: 24px;
          margin-left: 8px;
          cursor: pointer;
          border-radius: 50%;
          color: #fff;
          background-color: tomato;
          text-align: center;
          font-size: 18px;
        }
      }
    }
  }
  textarea.m_inp {
    line-height: 1.2;
  }
  .m_inp {
    background-color: #fff;
  }
  section.line {
    display: block;
    .label {
      margin-bottom: 8px;
    }
    .label,
    article {
      width: 100%;
    }
  }
}
</style>