yjhtgl-web/src/views/globalMap/RightMenu/OnlinePlotting/LayerDetail.vue

<template>
  <Dialog title="预案名称" custom-show hide-footer @close="handleClose1">
    <div class="btn-box1">
      <div class="btn1" @click="handleShowCooperate">
        <i class="icon1" />
        邀请协同
      </div>
      <div class="btn1" style="margin-left: 10px" @click="handleShowUser">
        <i class="icon2" />
        协同用户
      </div>
    </div>
    <div class="btn-box2">
      <div class="box-left">
        <div class="text1">分类</div>
        <el-select v-model="type" :teleported="false" class="custom-select" popper-class="custom-select-popper" style="width: 140px">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
      <div class="box-right">
        <div class="btn1">
          <i class="icon3" />
          显示标注
        </div>
        <div class="btn1" style="margin-left: 10px" @click="handleShowImportLayer">
          <i class="icon4" />
          导入图层
        </div>
        <div class="btn1" style="margin-left: 10px" @click="handleShowGroup">
          <i class="icon5" />
          添加分组
        </div>
      </div>
    </div>
    <div class="common-table">
      <div class="table-header">
        <div class="td" style="width: 40px"></div>
        <div class="td">标注名称</div>
        <div class="td">用户</div>
        <div class="td">单位</div>
        <div class="td">时间</div>
        <div class="td">操作</div>
      </div>
      <div v-for="(item, index) in dataList" :key="index" class="tr">
        <div class="td" :title="item.name">{{ item.name }}</div>
        <div class="td" :title="item.nickName">{{ item.nick_name }}</div>
        <div class="td" :title="item.dept_name">{{ item.dept_name }}</div>
        <div class="td" :title="item.create_time">{{ item.create_time }}</div>
        <div class="td">
          <div class="btn-text">{{ item.visible === 'false' ? '显示' : '隐藏' }}</div>
        </div>
      </div>
    </div>
  </Dialog>
  <Dialog v-model="showGroup" :title="groupForm.groupId ? '编辑分组' : '添加分组'" type="xs" hide-footer>
    <div class="form-item">
      <div class="text1">分组名称</div>
      <el-input v-model="groupForm.name" class="custom-input" placeholder="请输入" />
    </div>
    <div class="form-action">
      <div class="common-btn-primary" @click="handleAddGroup">保存</div>
      <div v-if="groupForm.groupId" class="common-btn-primary" @click="handleDeleteGroup">删除</div>
      <div class="common-btn" @click="handleClose2">取消</div>
    </div>
  </Dialog>
  <Contact v-if="showCooperate" v-model="showCooperate" @close="handleClose3" @confirm="handleConfirm" />
  <CollaborativeUser v-if="showUser" v-model="showUser" />
  <ImportLayer v-if="showImportLayer" v-model="showImportLayer" />
</template>

<script lang="ts" setup name="LayerDetail">
import { addGroup, addWsUser, getBzList } from '@/api/globalMap/onlinePlotting';
import ImportLayer from './ImportLayer.vue';
import CollaborativeUser from './CollaborativeUser.vue';
const props = defineProps({
  modelValue: Boolean,
  patternId: String
});
const emits = defineEmits(['update:modelValue']);
let type = ref('');
let typeOptions = ref([
  { label: '全部', value: '' },
  { label: '点', value: '1' },
  { label: '线', value: '2' },
  { label: '面', value: '3' },
  { label: '其他', value: '4' }
]);
let queryParams = reactive({
  pattern_id: props.patternId
});
let dataList = ref([]);

let showGroup = ref(false);
let groupForm = ref({
  groupId: '',
  name: ''
});
const handleShowGroup = () => {
  showGroup.value = true;
};
const handleAddGroup = () => {
  const obj = {
    group_name: groupForm.value.name,
    pattern_id: props.patternId
  };
  addGroup(obj).then((res) => {
    emits('update:modelValue', false);
  });
};
const handleClose1 = () => {
  emits('update:modelValue', false);
};
const handleDeleteGroup = () => {
  showGroup.value = false;
};
const handleClose2 = () => {
  showGroup.value = false;
};
let showCooperate = ref(false);
const handleShowCooperate = () => {
  showCooperate.value = true;
};
const handleClose3 = () => {
  showCooperate.value = false;
};
const handleConfirm = (data) => {
  let arr = [];
  data.forEach((item) => {
    arr.push(item.userId);
  });
  addWsUser({
    user_id_list: arr,
    pattern_id: props.patternId
  });
};
let showUser = ref(false);
const handleShowUser = () => {
  showUser.value = true;
};

let showImportLayer = ref(false);
const handleShowImportLayer = () => {
  showImportLayer.value = true;
};

onMounted(() => {
  getBzList(queryParams).then((res) => {
    dataList.value = res.data;
  });
});
</script>

<style lang="scss" scoped>
.btn-box1 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: absolute;
  top: 30px;
  right: 22px;
}
.btn-box2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  margin-bottom: 10px;
  .box-left {
    display: flex;
    align-items: center;
    .text1 {
      font-size: 14px;
      margin-right: 5px;
    }
  }
  .box-right {
    display: flex;
    align-items: center;
  }
}
.btn1 {
  width: 104px;
  height: 29px;
  background: url('@/assets/images/map/rightMenu/btn.png') no-repeat;
  background-size: 100% 100%;
  padding: 0 5px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .icon1 {
    width: 28px;
    height: 25px;
    background: url('@/assets/images/map/rightMenu/layerDetail/icon1.png') no-repeat;
    background-size: 100% 100%;
  }
  .icon2 {
    width: 23px;
    height: 24px;
    background: url('@/assets/images/map/rightMenu/layerDetail/icon2.png') no-repeat;
    background-size: 100% 100%;
  }
  .icon3 {
    width: 22px;
    height: 22px;
    background: url('@/assets/images/map/rightMenu/layerDetail/icon3.png') no-repeat;
    background-size: 100% 100%;
  }
  .icon4 {
    width: 26px;
    height: 26px;
    background: url('@/assets/images/map/rightMenu/layerDetail/icon4.png') no-repeat;
    background-size: 100% 100%;
  }
  .icon5 {
    width: 23px;
    height: 23px;
    background: url('@/assets/images/map/rightMenu/layerDetail/icon5.png') no-repeat;
    background-size: 100% 100%;
  }
}
.form-item {
  display: flex;
  align-items: center;
  .text1 {
    flex-shrink: 0;
    margin-right: 10px;
  }
  .custom-input {
    flex: 1;
  }
}
.form-action {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>