@sugarat/easypicker2-client 2.4.1

package/src/pages/dashboard/manage/wish/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div class="user">
+    <div class="panel">
+      <div class="p10 log-filter">
+        <span class="item">
+          <span class="label">状态</span>
+          <el-select v-model="filterLogType" size="default" placeholder="请选择筛选状态">
+            <el-option label="全部" :value="-1"></el-option>
+            <el-option v-for="(item, idx) in logTypeList" :key="idx" :label="item.label" :value="item.type"></el-option>
+          </el-select>
+        </span>
+        <span class="item">
+          <el-input size="default" clearable placeholder="请输入要检索的内容" :prefix-icon="Search" v-model="searchWord">
+          </el-input>
+        </span>
+      </div>
+      <el-table height="550" stripe border :default-sort="{ prop: 'date', order: 'descending' }" :data="pageWishes"
+        style="width: 100%">
+        <el-table-column sortable prop="createDate" label="提交时间" width="190">
+          <template #default="scope">{{ scope.row.createDate && formatDate(new Date(scope.row.createDate)) }}</template>
+        </el-table-column>
+        <el-table-column prop="title" label="标题" width="120"></el-table-column>
+        <el-table-column prop="des" label="详细描述"></el-table-column>
+        <el-table-column prop="contact" label="联系方式"></el-table-column>
+        <el-table-column prop="status" label="状态">
+          <template #default="scope">
+            {{ logTypeList.find(v => v.type === scope.row.status).label }}
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template #default="scope">
+            <div class="text-btn-list">
+              <el-button @click="handleChangeStatus(scope.row.id, scope.row.status)" type="primary" text size="small">修改状态
+              </el-button>
+              <el-button @click="handleRewriteDes(scope.row.id, scope.row.title, scope.row.des)" type="primary" text
+                size="small">
+                修改描述
+              </el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="flex fc p10">
+        <el-pagination :current-page="pageCurrent" @current-change="handlePageChange" background :page-count="pageCount"
+          :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" @size-change="handleSizeChange"
+          :total="filterWishes.length" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
+      </div>
+    </div>
+    <!-- 状态修改弹窗 -->
+    <el-dialog :fullscreen="isMobile" center title="状态修改" v-model="showWishStatusDialog">
+      <div class="tc">
+        <el-select v-model="selectStatus" placeholder="请选择新状态">
+          <el-option v-for="s in wishStatusList" :key="s.type" :label="s.label" :value="s.type"></el-option>
+        </el-select>
+      </div>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="showWishStatusDialog = false">取 消</el-button>
+          <el-button type="primary" @click="handleSaveStatus">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 需求描述更新弹窗 -->
+    <el-dialog title="需求信息" v-model="desVisible" :fullscreen="isMobile">
+      <el-form :model="formData">
+        <el-form-item label="需求" :label-width="formLabelWidth">
+          <el-input placeholder="一句简单明了的话概括一下" v-model="formData.title"></el-input>
+        </el-form-item>
+        <el-form-item label="详细描述" :label-width="formLabelWidth">
+          <el-input placeholder="用朴素的话语进一步描述你的需求" type="textarea" v-model="formData.des"></el-input>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="desVisible = false">取 消</el-button>
+          <el-button type="primary" @click="handleUpdateWish">确 定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import {
+  computed, onMounted, reactive, ref,
+} from 'vue'
+import { useStore } from 'vuex'
+import { Search } from '@element-plus/icons-vue'
+import { WishApi } from '@/apis'
+import { formatDate } from '@/utils/stringUtil'
+import { WishStatus } from '@/constants'
+
+const $store = useStore()
+const wishes = reactive<WishApiTypes.WishItem[]>([])
+const refreshWishes = () => {
+  WishApi.findAllWish().then((v) => {
+    wishes.splice(0, wishes.length, ...v.data)
+  })
+}
+
+// 筛选状态
+const filterLogType = ref(-1)
+const searchWord = ref('')
+const logTypeList = reactive([
+  {
+    label: '待审核',
+    type: WishStatus.REVIEW,
+  },
+  {
+    label: '待开始',
+    type: WishStatus.WAIT,
+  },
+  {
+    label: '关闭',
+    type: WishStatus.CLOSE,
+  },
+  {
+    label: '已上线',
+    type: WishStatus.END,
+  },
+  {
+    label: '开发中',
+    type: WishStatus.START,
+  },
+])
+
+const filterWishes = computed(() => wishes
+  .filter((v) => v.status === filterLogType.value || filterLogType.value === -1)
+  .filter((v) => {
+    const {
+      createDate, title, des, contact,
+    } = v
+    if (searchWord.value.length === 0) return true
+    return `${formatDate(new Date(createDate))} ${title} ${des} ${contact}`.includes(searchWord.value)
+  }))
+
+// 分页
+const pageSize = ref(10)
+const handleSizeChange = (v: number) => {
+  pageSize.value = v
+}
+const pageCount = computed(() => {
+  const t = Math.ceil(filterWishes.value.length / pageSize.value)
+  return t
+})
+const pageCurrent = ref(1)
+const pageWishes = computed(() => {
+  const start = (pageCurrent.value - 1) * pageSize.value
+  const end = (pageCurrent.value) * pageSize.value
+  return filterWishes.value.slice(start, end)
+})
+const handlePageChange = (idx: number) => {
+  pageCurrent.value = idx
+}
+
+// 状态修改
+const showWishStatusDialog = ref(false)
+const selectWishId = ref('')
+const selectStatus = ref(WishStatus.REVIEW)
+const wishStatusList = logTypeList
+const handleChangeStatus = (wishId: string, status: WishStatus) => {
+  selectWishId.value = wishId
+  selectStatus.value = status
+  showWishStatusDialog.value = true
+}
+const handleSaveStatus = () => {
+  const wish = wishes.find((v) => v.id === selectWishId.value)
+  wish.status = selectStatus.value
+  showWishStatusDialog.value = false
+  WishApi
+    .updateWishStatus(selectWishId.value, selectStatus.value)
+    .then(() => {
+      ElMessage.success('修改成功')
+    })
+}
+
+// 描述信息修改
+const formLabelWidth = '80px'
+const desVisible = ref(false)
+const formData = reactive({
+  title: '',
+  des: '',
+})
+const handleRewriteDes = (id: string, title: string, des: string) => {
+  selectWishId.value = id
+  formData.title = title
+  formData.des = des
+  desVisible.value = true
+}
+const handleUpdateWish = () => {
+  const wish = wishes.find((v) => v.id === selectWishId.value)
+  WishApi
+    .updateWishDes(selectWishId.value, formData.title, formData.des)
+    .then(() => {
+      desVisible.value = false
+      wish.title = formData.title
+      wish.des = formData.des
+      ElMessage.success('修改成功')
+    })
+}
+onMounted(() => {
+  refreshWishes()
+})
+const isMobile = computed(() => $store.getters['public/isMobile'])
+
+</script>
+
+<style scoped lang="scss">
+@media screen and (max-width: 700px) {
+  .user {
+    margin-top: 40px !important;
+  }
+
+  .log-filter {
+    justify-content: center;
+  }
+}
+
+.user {
+  margin: 0 auto;
+}
+
+.panel {
+  max-width: 1256px;
+  padding: 1em;
+  background-color: #fff;
+  margin: 10px auto;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
+  border-radius: 4px;
+}
+
+.log-filter {
+  display: flex;
+  flex-wrap: wrap;
+
+  .item {
+    margin-right: 10px;
+    margin-bottom: 10px;
+
+    .label {
+      margin-right: 10px;
+      font-size: 12px;
+    }
+  }
+}
+
+.text-btn-list {
+  display: flex;
+  flex-wrap: wrap;
+
+  button {
+    margin-left: 0;
+  }
+}
+</style>

package/src/pages/dashboard/tasks/components/CategoryPanel.vue

@@ -0,0 +1,208 @@
+<template>
+  <!-- 分类管理 -->
+  <div class="panel">
+    <!-- 按钮 -->
+    <div class="btn-area">
+      <h5>分类列表</h5>
+      <h6 style="font-weight: lighter">(点击分类可筛选任务)</h6>
+    </div>
+    <!-- 分类列表 -->
+    <div style="margin-top: 15px" class="category-list">
+      <div class="new-tag-wrap">
+        <!-- 新分类 -->
+        <el-input
+          class="input-new-tag el-tag"
+          v-if="isShowCreateCategory"
+          v-model="categoryName"
+          ref="saveTagInput"
+          placeholder="分类名称"
+          @keyup.enter="addCategory"
+          @focusout="addCategory"
+        ></el-input>
+        <el-button
+          v-else
+          class="button-new-tag el-tag"
+          size="small"
+          @click="isShowCreateCategory = true"
+          >+ New 分类</el-button
+        >
+        <el-tag
+          :effect="category === 'default' ? 'dark' : 'plain'"
+          @click="handleClickCategory('default')"
+          >默认{{ taskCount('default') }}</el-tag
+        >
+        <span class="list-tip"
+          ><el-tag
+            type="danger"
+            :effect="category === 'trash' ? 'dark' : 'plain'"
+            @click="handleClickCategory('trash')"
+            ><el-icon><DeleteFilled /></el-icon> 回收站{{
+              taskCount('trash')
+            }}</el-tag
+          ></span
+        >
+      </div>
+      <div class="tag-wrap">
+        <div class="tag-list">
+          <el-tag
+            v-for="tag in categorys"
+            :key="tag.k"
+            closable
+            :effect="category === tag.k ? 'dark' : 'plain'"
+            @close="handleDeleteCategory(tag)"
+            @click="handleClickCategory(tag.k)"
+            >{{ tag.name }}{{ taskCount(tag.k) }}</el-tag
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { computed, defineComponent, ref } from 'vue'
+import { DeleteFilled } from '@element-plus/icons-vue'
+import { useStore } from 'vuex'
+
+export default defineComponent({
+  name: 'categoryPanel',
+  components: {
+    DeleteFilled
+  },
+  props: {
+    category: {
+      type: String,
+      required: true,
+      default: 'default'
+    }
+  },
+  setup(props, context) {
+    const $store = useStore()
+    // 分类相关
+    const categorys = computed(() => $store.state.category.categoryList)
+    const tasks = computed(() => $store.state.task.taskList)
+    const taskCount = (c: string) => {
+      const count = tasks.value.filter((t: any) => t.category === c).length
+      return count === 0 ? '' : ` (${count})`
+    }
+    const isShowCreateCategory = ref(false)
+    const categoryName = ref('')
+    const addCategory = () => {
+      isShowCreateCategory.value = false
+      if (!categoryName.value.trim()) {
+        // ElMessage.warning('不能为空')
+        return
+      }
+      $store
+        .dispatch('category/createCategory', categoryName.value)
+        .then(() => {
+          ElMessage.success('创建成功')
+        })
+        .catch((err) => {
+          if (err.code === 2001) {
+            ElMessage.warning('分类名称已存在')
+          }
+        })
+      categoryName.value = ''
+    }
+
+    const handleClickCategory = (k: string) => {
+      context.emit('update:category', k)
+    }
+
+    const handleDeleteCategory = (c: any) => {
+      ElMessageBox.confirm('是否删除', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消'
+      })
+        .then(() => {
+          $store.dispatch('category/deleteCategory', c.k).then(() => {
+            // 删除后变动的默认选择
+            handleClickCategory('default')
+            ElMessage.success('删除成功')
+            // 获取最新的任务
+            $store.dispatch('task/getTask')
+          })
+        })
+        .catch(() => {
+          ElMessage.info('取消删除')
+        })
+    }
+
+    return {
+      categorys,
+      isShowCreateCategory,
+      categoryName,
+      addCategory,
+      handleDeleteCategory,
+      handleClickCategory,
+      taskCount
+    }
+  }
+})
+</script>
+<style scoped lang="scss">
+.el-tag {
+  margin-left: 10px;
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+.new-tag-wrap {
+  display: flex;
+  align-items: center;
+}
+.button-new-tag {
+  margin-left: 10px;
+  height: 32px;
+  line-height: 30px;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+.input-new-tag {
+  width: 120px;
+  padding: 0;
+  margin-left: 10px;
+  margin-bottom: 10px;
+  vertical-align: bottom;
+}
+.panel {
+  padding: 1em;
+  background-color: #fff;
+  margin: 10px auto;
+  box-sizing: border-box;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+}
+.btn-area {
+  display: flex;
+  justify-content: center;
+}
+.list-tip {
+  // color: #67c23a;
+  // font-size: 10px;
+  margin-right: 10px;
+  flex: 1;
+  text-align: right;
+}
+.tag-wrap {
+  width: 100%;
+  height: 150px;
+}
+.tag-list {
+  height: 150px;
+  overflow-x: hidden;
+  overflow-y: scroll;
+  display: flex;
+  flex-wrap: wrap;
+  :deep(.el-tag) {
+    width: 140px;
+  }
+  :deep(.el-tag__content) {
+    width: 100px;
+    text-align: center;
+    text-overflow: ellipsis;
+    word-break: keep-all;
+    overflow: hidden;
+  }
+}
+</style>

package/src/pages/dashboard/tasks/components/CreateTask.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="btn-area">
+      <el-button size="large" type="primary" :plain="!isShowCreateTask" @click="
+        isShowCreateTask =
+        !isShowCreateTask
+      ">
+        {{
+            isShowCreateTask
+              ? '关闭创建面板'
+              : '创建收集任务'
+        }}
+      </el-button>
+    </div>
+    <!-- 新增区域 -->
+    <div v-show="isShowCreateTask">
+      <div class="input-container">
+        <el-input placeholder="请输入任务名称(上述列表选择分类)" v-model="taskName"></el-input>
+        <el-button @click="createTask" :type="taskName?.length ? 'success' : 'default'">确定</el-button>
+      </div>
+    </div>
+    <tip class="p10">
+      点击
+      <el-icon>
+        <Menu />
+      </el-icon> 可以进一步的调整任务
+    </tip>
+    <tip>
+      设置截止时间，自动重命名，名单限制，批注，文件模板。。🚀
+    </tip>
+  </div>
+</template>
+<script lang="ts" setup>
+import { ElMessage } from 'element-plus'
+import {
+  computed,
+  ref,
+} from 'vue'
+import { useStore } from 'vuex'
+import { Menu } from '@element-plus/icons-vue'
+import Tip from './infoPanel/tip.vue'
+
+const props = defineProps({
+  activeCategoryKey: {
+    type: String,
+    default: 'default',
+  },
+})
+const $store = useStore()
+const categorys = computed(() => $store.state.category
+  .categoryList)
+const categoryName = computed(() => {
+  if (props.activeCategoryKey
+        === 'default') {
+    return '默认'
+  }
+  return categorys.value.find((v: any) => v.k
+        === props.activeCategoryKey).name
+})
+// 任务相关
+const isShowCreateTask = ref(false)
+const taskName = ref('')
+const createTask = () => {
+  if (!taskName.value.trim()) {
+    ElMessage.warning('不能为空')
+    return
+  }
+  $store
+    .dispatch('task/createTask', {
+      name: taskName.value,
+      category: props.activeCategoryKey,
+    })
+    .then(() => {
+      ElMessage.success('创建成功')
+    })
+  taskName.value = ''
+}
+
+</script>
+<style scoped>
+.btn-area {
+  display: flex;
+  justify-content: center;
+}
+
+.input-container {
+  margin: 15px auto;
+  max-width: 600px;
+  background-color: #fff;
+  display: flex;
+  justify-content: space-around;
+}
+</style>

package/src/pages/dashboard/tasks/components/TaskInfo.vue

@@ -0,0 +1,129 @@
+<template>
+  <el-card class="task-item">
+    <template #header>
+      <div class="header">
+        <span class="ellipsis">{{ item.name }}</span>
+        <div class="actions">
+          <el-button
+            circle
+            type="warning"
+            :icon="Menu"
+            title="更多"
+            @click="$emit('more', item)"
+          ></el-button>
+          <el-button
+            circle
+            type="success"
+            :icon="Edit"
+            title="编辑基本信息"
+            @click="$emit('edit', item)"
+          >
+          </el-button>
+          <el-button
+            circle
+            type="primary"
+            :icon="Share"
+            title="分享"
+            @click="$emit('share', item.key)"
+          >
+          </el-button>
+          <el-button
+            circle
+            type="danger"
+            :icon="Delete"
+            title="删除"
+            @click="$emit('delete', item.key, item.category === 'trash')"
+          >
+          </el-button>
+        </div>
+      </div>
+    </template>
+
+    <!-- 没有提交记录 -->
+    <div class="body">
+      <div v-if="item.recentLog.length === 0" class="empty">
+        暂时没有提交记录...
+      </div>
+      <ul v-else>
+        <li class="check-files">
+          <strong>近 {{ item.recentLog.length }} 条提交记录</strong>
+          <router-link :to="`/dashboard/files?task=${item.key}`"
+            >查看详情</router-link
+          >
+        </li>
+        <li
+          v-for="(log, idx) in item.recentLog"
+          :key="Number(idx)"
+          class="ellipsis"
+        >
+          <span class="time">{{ formatDate(new Date(log.date)) }}</span>
+          <span class="name">{{ log.filename }}</span>
+        </li>
+      </ul>
+    </div>
+  </el-card>
+</template>
+<script lang="ts" setup>
+import { Delete, Share, Menu, Edit } from '@element-plus/icons-vue'
+
+import { formatDate } from '@/utils/stringUtil'
+
+defineProps<{
+  item: TaskApiTypes.TaskItem
+}>()
+</script>
+<style scoped lang="scss">
+.task-item {
+  min-width: 400px;
+  margin-top: 1em;
+
+  .header {
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: nowrap;
+
+    .actions {
+      min-width: 200px;
+      padding: 3px 0;
+      margin-left: 20px;
+    }
+  }
+
+  .body {
+    min-height: 30px;
+
+    .empty {
+      text-align: center;
+      font-size: 12px;
+      color: grey;
+    }
+
+    ul {
+      font-size: 12px;
+      color: grey;
+      list-style: none;
+
+      .time {
+        margin-right: 10px;
+      }
+    }
+  }
+}
+
+@media screen and (max-width: 700px) {
+  .task-item {
+    min-width: 100%;
+  }
+}
+
+.check-files {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  a {
+    color: #409eff;
+  }
+}
+</style>