add share address book

2024-10-28 14:25:41 +08:00
parent 67ecc0192b
commit c7b70471b2
23 changed files with 1436 additions and 106 deletions
@@ -0,0 +1,95 @@
+import { reactive, ref } from 'vue'
+import { create, list, remove, update } from '@/api/address_book_collection'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { T } from '@/utils/i18n'
+
+export function useRepositories (is_my) {
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    is_my,
+    name: null,
+    user_id: null,
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      listRes.total = res.data.total
+    }
+  }
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+    }
+  }
+
+  const del = async (row) => {
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      getList()
+    }
+  }
+
+  const formVisible = ref(false)
+  const formData = reactive({
+    id: 0,
+    name: '',
+  })
+
+  const toEdit = (row) => {
+    formVisible.value = true
+    //将row中的数据赋值给formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = row[key]
+    })
+
+  }
+  const toAdd = () => {
+    formVisible.value = true
+    //重置formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = undefined
+    })
+
+  }
+  const submit = async () => {
+    const api = formData.id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      formVisible.value = false
+      getList()
+    }
+  }
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+  }
+}
@@ -0,0 +1,122 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="80px">
+        <el-form-item :label="T('Owner')">
+          <el-select v-model="listQuery.user_id" clearable>
+            <el-option
+                v-for="item in allUsers"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <el-table-column prop="id" label="id" align="center"/>
+        <el-table-column prop="user_id" :label="T('Owner')" align="center">
+          <template #default="{row}">
+            <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" :label="T('AddressBook')" align="center"/>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+        <el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="600" fixed="right">
+          <template #default="{row}">
+            <el-button type="primary" @click="showRules(row)">{{ T('ShareRules') }}</el-button>
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+    <el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') ">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item :label="T('Owner')" prop="user_id" required>
+          <el-select v-model="formData.user_id">
+            <el-option
+                v-for="item in allUsers"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="T('Name')" prop="name" required>
+          <el-input v-model="formData.name"></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+    <el-dialog v-model="rulesVisible" :title="T('ShareRules')" destroy-on-close top="5vh" width="80%">
+      <Rule :collection="clickRow" :is_my="0"></Rule>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script setup>
+  import { T } from '@/utils/i18n'
+  import { ref } from 'vue'
+  import { useRepositories } from '@/views/address_book/collection'
+  import { onActivated, onMounted, watch } from 'vue'
+  import Rule from '@/views/address_book/rule.vue'
+  import { loadAllUsers } from '@/global'
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+  getAllUsers()
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+  } = useRepositories()
+
+  listQuery.is_my = 0
+
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+  const clickRow = ref({})
+  const rulesVisible = ref(false)
+  const showRules = (row) => {
+    clickRow.value = row
+    rulesVisible.value = true
+    console.log('showRules')
+  }
+
+</script>
+
+<style scoped lang="scss">
+
+</style>
@@ -1,20 +1,40 @@
-import { reactive, ref } from 'vue'
+import { reactive, ref, watch } from 'vue'
 import { create, list, remove, update } from '@/api/address_book'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { T } from '@/utils/i18n'
+import { useRepositories as useCollectionRepositories } from '@/views/address_book/collection'
+import { useRepositories as useTagRepositories } from '@/views/tag/index'
+import { loadAllUsers } from '@/global'
+
+export function useRepositories (is_my = 0) {
+
+  const { allUsers, getAllUsers } = loadAllUsers()
+
+  const {
+    listRes: collectionListRes,
+    listQuery: collectionListQuery,
+    getList: getCollectionList,
+  } = useCollectionRepositories(is_my)
+  collectionListQuery.page_size = 9999
+  const {
+    listRes: tagListRes,
+    listQuery: tagListQuery,
+    getList: getTagList,
+  } = useTagRepositories(is_my)
+  tagListQuery.page_size = 9999

-export function useRepositories (user_id) {
  const listRes = reactive({
    list: [], total: 0, loading: false,
  })
  const listQuery = reactive({
    page: 1,
    page_size: 10,
-    is_my: 0,
+    is_my,
    id: null,
    user_id: null,
    username: null,
    hostname: null,
+    collection_id: null,
  })

  const getList = async () => {
@@ -52,10 +72,10 @@ export function useRepositories (user_id) {
  }

  const platformList = [
-    { label: 'Windows', value: 'Windows' },
-    { label: 'Linux', value: 'Linux' },
-    { label: 'Mac OS', value: 'Mac OS' },
-    { label: 'Android', value: 'Android' },
+    { label: 'Windows', value: 'Windows', icon: 'windows' },
+    { label: 'Linux', value: 'Linux', icon: 'linux' },
+    { label: 'Mac OS', value: 'Mac OS', icon: 'mac' },
+    { label: 'Android', value: 'Android', icon: 'android' },
  ]
  const formVisible = ref(false)
  const formData = reactive({
@@ -76,6 +96,7 @@ export function useRepositories (user_id) {
    'user_id': null,
    user_ids: [],
    'username': '',
+    collection_id: null,
  })

  const toEdit = (row) => {
@@ -84,6 +105,10 @@ export function useRepositories (user_id) {
    Object.keys(formData).forEach(key => {
      formData[key] = row[key]
    })
+    collectionListQuery.user_id = row.user_id
+    getCollectionList()
+    tagListQuery.collection_id = row.collection_id
+    getTagList()

  }
  const toAdd = () => {
@@ -126,6 +151,36 @@ export function useRepositories (user_id) {
    shareToWebClientForm.hash = row.hash
    shareToWebClientVisible.value = true
  }
+
+  const changeQueryUser = async (val) => {
+    tagListRes.list = []
+    listQuery.collection_id = null
+    if (!val) {
+      collectionListRes.list = []
+    } else {
+      collectionListQuery.user_id = val
+      getCollectionList()
+    }
+  }
+  const changeUser = async (val) => {
+    tagListRes.list = []
+    formData.tags = []
+    formData.collection_id = 0
+    if (!val) {
+      collectionListRes.list = []
+    } else {
+      collectionListQuery.user_id = val
+      getCollectionList()
+    }
+  }
+  const changeCollection = async (val) => {
+    tagListRes.list = []
+    formData.tags = []
+    tagListQuery.user_id = formData.user_id
+    tagListQuery.collection_id = val
+    getTagList()
+  }
+
  return {
    listRes,
    listQuery,
@@ -141,5 +196,20 @@ export function useRepositories (user_id) {
    shareToWebClientVisible,
    shareToWebClientForm,
    toShowShare,
+
+    collectionListQuery,
+    getCollectionList,
+    collectionListRes,
+
+    tagListQuery,
+    getTagList,
+    tagListRes,
+
+    allUsers,
+    getAllUsers,
+
+    changeQueryUser,
+    changeUser,
+    changeCollection,
  }
 }
@@ -1,9 +1,9 @@
 <template>
  <div>
    <el-card class="list-query" shadow="hover">
-      <el-form inline label-width="80px">
+      <el-form inline label-width="120px">
        <el-form-item :label="T('Owner')">
-          <el-select v-model="listQuery.user_id" clearable>
+          <el-select v-model="listQuery.user_id" clearable @change="changeQueryUser">
            <el-option
                v-for="item in allUsers"
                :key="item.id"
@@ -12,6 +12,12 @@
            ></el-option>
          </el-select>
        </el-form-item>
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="listQuery.collection_id" clearable>
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
+          </el-select>
+        </el-form-item>
        <el-form-item :label="T('Id')">
          <el-input v-model="listQuery.id" clearable></el-input>
        </el-form-item>
@@ -32,7 +38,13 @@
      <el-table :data="listRes.list" v-loading="listRes.loading" border>
        <el-table-column prop="id" label="id" align="center" width="200">
          <template #default="{row}">
-            <span>{{ row.id }} <el-icon @click="handleClipboard(row.id, $event)"><CopyDocument/></el-icon></span>
+            <div>
+              <PlatformIcons :name="platformList.find(p=>p.label===row.platform)?.icon" style="width: 20px;height: 20px;display: inline-block" color="var(--basicBlack)"/>
+              {{ row.id }}
+              <el-icon @click="handleClipboard(row.id, $event)">
+                <CopyDocument/>
+              </el-icon>
+            </div>
          </template>
        </el-table-column>
        <el-table-column :label="T('Owner')" align="center" width="200">
@@ -40,10 +52,14 @@
            <span v-if="row.user_id"> <el-tag>{{ allUsers?.find(u => u.id === row.user_id)?.username }}</el-tag> </span>
          </template>
        </el-table-column>
+        <el-table-column prop="collection_id" :label="T('AddressBookName')" align="center" width="150">
+          <template #default="{row}">
+            <span v-if="row.collection_id === 0">{{ T('MyAddressBook') }}</span>
+            <span v-else>{{ row.collection?.name }}</span>
+          </template>
+        </el-table-column>
        <el-table-column prop="username" :label="T('Username')" align="center" width="150"/>
        <el-table-column prop="hostname" :label="T('Hostname')" align="center" width="150"/>
-
-        <el-table-column prop="platform" :label="T('Platform')" align="center" width="120"/>
        <el-table-column prop="tags" :label="T('Tags')" align="center"/>
        <!--        <el-table-column prop="created_at" label="创建时间" align="center"/>-->
        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
@@ -81,6 +97,12 @@
            ></el-option>
          </el-select>
        </el-form-item>
+        <el-form-item :label="T('AddressBookName')">
+          <el-select v-model="formData.collection_id" clearable @change="changeCollection">
+            <el-option :value="0" :label="T('MyAddressBook')"></el-option>
+            <el-option v-for="c in collectionListRes.list" :key="c.id" :label="c.name" :value="c.id"></el-option>
+          </el-select>
+        </el-form-item>
        <el-form-item label="id" prop="id" required>
          <el-input v-model="formData.id"></el-input>
        </el-form-item>
@@ -116,7 +138,7 @@
        <el-form-item :label="T('Tags')" prop="tags">
          <el-select v-model="formData.tags" multiple>
            <el-option
-                v-for="item in tagList"
+                v-for="item in tagListRes.list"
                :key="item.name"
                :label="item.name"
                :value="item.name"
@@ -146,44 +168,32 @@
        </el-form-item>
      </el-form>
    </el-dialog>
-<!--    <el-dialog v-model="shareToWebClientVisible" width="900" :close-on-click-modal="false">
-      <shareByWebClient :id="shareToWebClientForm.id"
-                        :hash="shareToWebClientForm.hash"
-                        @cancel="shareToWebClientVisible=false"
-                        @success=""/>
-    </el-dialog>-->
+    <!--    <el-dialog v-model="shareToWebClientVisible" width="900" :close-on-click-modal="false">
+          <shareByWebClient :id="shareToWebClientForm.id"
+                            :hash="shareToWebClientForm.hash"
+                            @cancel="shareToWebClientVisible=false"
+                            @success=""/>
+        </el-dialog>-->
  </div>
 </template>

 <script setup>
  import { onActivated, onMounted, reactive, ref, watch } from 'vue'
-  import { list as fetchTagList } from '@/api/tag'
-  import { loadAllUsers } from '@/global'
  import { useRepositories } from '@/views/address_book/index'
  import { toWebClientLink, getPeerSlat } from '@/utils/webclient'
  import { T } from '@/utils/i18n'
  import { useRoute } from 'vue-router'
-  import shareByWebClient from '@/views/address_book/components/shareByWebClient.vue'
  import { connectByClient } from '@/utils/peer'
  import { useAppStore } from '@/store/app'
  import { handleClipboard } from '@/utils/clipboard'
  import { CopyDocument } from '@element-plus/icons'
+  import PlatformIcons from '@/components/icons/platform.vue'
+
+

  const appStore = useAppStore()
  const route = useRoute()
-  const { allUsers, getAllUsers } = loadAllUsers()
-  getAllUsers()
-  const changeUser = (v) => {
-    formData.tags = []
-    fetchTagListData(v)
-  }
-  const tagList = ref([])
-  const fetchTagListData = async (user_id) => {
-    const res = await fetchTagList({ user_id }).catch(_ => false)
-    if (res) {
-      tagList.value = res.data.list
-    }
-  }
+

  const {
    listRes,
@@ -197,15 +207,24 @@
    toEdit,
    toAdd,
    submit,
-    shareToWebClientVisible,
-    shareToWebClientForm,
-    toShowShare,
+    // shareToWebClientVisible,
+    // shareToWebClientForm,
+    // toShowShare,
+    collectionListRes,
+
+    tagListRes,
+
+    allUsers, getAllUsers,
+
+    changeQueryUser,
+    changeUser,
+    changeCollection
  } = useRepositories()

  if (route.query?.user_id) {
    listQuery.user_id = parseInt(route.query.user_id)
  }
-
+  onMounted(getAllUsers)
  onMounted(getList)
  onActivated(getList)

@@ -0,0 +1,112 @@
+import { computed, reactive, ref } from 'vue'
+import { create, list, remove, update } from '@/api/address_book_collection_rule'
+import { groupUsers } from '@/api/user'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { T } from '@/utils/i18n'
+import collection from '@element-plus/icons/lib/Collection'
+
+export function useRepositories (is_my) {
+  const listRes = reactive({
+    list: [], total: 0, loading: false,
+  })
+  const listQuery = reactive({
+    page: 1,
+    page_size: 10,
+    collection_id: null,
+    is_my,
+  })
+
+  const getList = async () => {
+    listRes.loading = true
+    const res = await list(listQuery).catch(_ => false)
+    listRes.loading = false
+    if (res) {
+      listRes.list = res.data.list
+      listRes.total = res.data.total
+    }
+  }
+  const handlerQuery = () => {
+    if (listQuery.page === 1) {
+      getList()
+    } else {
+      listQuery.page = 1
+    }
+  }
+
+  const del = async (row) => {
+    const cf = await ElMessageBox.confirm(T('Confirm?', { param: T('Delete') }), {
+      confirmButtonText: T('Confirm'),
+      cancelButtonText: T('Cancel'),
+      type: 'warning',
+    }).catch(_ => false)
+    if (!cf) {
+      return false
+    }
+
+    const res = await remove({ id: row.id }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      getList()
+    }
+  }
+
+  const rules = computed(_ => [
+    { label: T('Read'), value: 1 },
+    { label: T('ReadWrite'), value: 2 },
+    { label: T('FullControl'), value: 3 },
+  ])
+
+  const formVisible = ref(false)
+  const formData = reactive({
+    id: 0,
+    collection_id: null,
+    type: 1,
+    rule: 1,
+    to_id: null,
+    user_id: null,
+  })
+
+  const toEdit = (row) => {
+    formVisible.value = true
+    //将row中的数据赋值给formData
+    Object.keys(formData).forEach(key => {
+      formData[key] = row[key]
+    })
+
+  }
+  const toAdd = () => {
+    formVisible.value = true
+
+  }
+  const submit = async () => {
+    const api = formData.id ? update : create
+    const res = await api(formData).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+      formVisible.value = false
+      getList()
+    }
+  }
+  const groupUsersList = ref([])
+  const getGroupUsers = async () => {
+    const res = await groupUsers({ user_id: formData.user_id }).catch(_ => false)
+    if (res) {
+      groupUsersList.value = res.data
+    }
+  }
+  return {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    rules,
+    groupUsersList,
+    getGroupUsers,
+  }
+}
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <el-card class="list-query" shadow="hover">
+      <el-form inline label-width="80px">
+        <el-form-item>
+          <el-button type="primary" @click="handlerQuery">{{ T('Filter') }}</el-button>
+          <el-button type="danger" @click="toAdd">{{ T('Add') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="list-body" shadow="hover">
+      <el-table :data="listRes.list" v-loading="listRes.loading" border>
+        <el-table-column prop="rule" :label="T('Rule')" align="center">
+          <template #default="{row}">
+            <div>
+              {{ rules.find(r => r.value === row.rule)?.label }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="to_id" :label="T('ShareTo')" align="center">
+          <template #default="{row}">
+            <div v-if="row.type===1">
+              {{ groupUsersList.find(u => u.id === row.to_id)?.username }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="created_at" :label="T('CreatedAt')" align="center"/>
+        <!--        <el-table-column prop="updated_at" label="更新时间" align="center"/>-->
+        <el-table-column :label="T('Actions')" align="center" class-name="table-actions" width="300" fixed="right">
+          <template #default="{row}">
+            <el-button @click="toEdit(row)">{{ T('Edit') }}</el-button>
+            <el-button type="danger" @click="del(row)">{{ T('Delete') }}</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+    <el-card class="list-page" shadow="hover">
+      <el-pagination background
+                     layout="prev, pager, next, sizes, jumper"
+                     :page-sizes="[10,20,50,100]"
+                     v-model:page-size="listQuery.page_size"
+                     v-model:current-page="listQuery.page"
+                     :total="listRes.total">
+      </el-pagination>
+    </el-card>
+    <el-dialog v-model="formVisible" width="800" :title="!formData.id?T('Create') :T('Update') " :close-on-click-modal="false">
+      <el-form class="dialog-form" ref="form" :model="formData" label-width="120px">
+        <el-form-item :label="T('AddressBookName')">
+          {{ props.collection.name }}
+        </el-form-item>
+        <el-form-item :label="T('Rule')" prop="rule" required>
+          <el-radio-group v-model="formData.rule">
+            <el-radio v-for="item in rules" :key="item.value" :label="item.value">
+              {{ item.label }}
+            </el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item :label="T('ShareTo')" prop="to_id" required>
+<!--          <el-input-number v-model="formData.to_id"></el-input-number>-->
+          <el-select v-model="formData.to_id">
+            <el-option
+                v-for="item in groupUsersList"
+                :key="item.id"
+                :label="item.username"
+                :value="item.id"
+                :disabled="!item.status"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="formVisible = false">{{ T('Cancel') }}</el-button>
+          <el-button @click="submit" type="primary">{{ T('Submit') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+
+  import { T } from '@/utils/i18n'
+  import { useRepositories } from '@/views/address_book/rule'
+  import { onActivated, onMounted, watch } from 'vue'
+
+  const props = defineProps({
+    collection: {
+      type: Object,
+      required: true,
+    },
+    is_my: {
+      type: Number,
+      default: 0,
+    },
+  })
+  const {
+    listRes,
+    listQuery,
+    getList,
+    handlerQuery,
+    del,
+    formVisible,
+    formData,
+    toEdit,
+    toAdd,
+    submit,
+    rules,
+    groupUsersList,
+    getGroupUsers,
+  } = useRepositories(props.is_my)
+
+  formData.collection_id = props.collection.id
+  formData.user_id = props.collection.user_id
+  listQuery.collection_id = props.collection.id
+
+  onMounted(getGroupUsers)
+  onMounted(getList)
+  onActivated(getList)
+
+  watch(() => listQuery.page, getList)
+
+  watch(() => listQuery.page_size, handlerQuery)
+
+</script>
+
+<style scoped lang="scss">
+
+</style>