From 76d91d8323ec1f7fe186039116f9289439b62405 Mon Sep 17 00:00:00 2001
From: qinjie <jqinjie@foxmail.com>
Date: Fri, 20 Aug 2021 11:48:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=87=E4=BB=B6=E5=A4=A7=E5=B0=8F=E5=86=99?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/account/center/Index.vue | 289 +++++++++++++++++++++++++++++
 src/views/form/basicForm/Index.vue | 134 +++++++++++++
 src/views/profile/basic/Index.vue  | 249 +++++++++++++++++++++++++
 3 files changed, 672 insertions(+)
 create mode 100644 src/views/account/center/Index.vue
 create mode 100644 src/views/form/basicForm/Index.vue
 create mode 100644 src/views/profile/basic/Index.vue

diff --git a/src/views/account/center/Index.vue b/src/views/account/center/Index.vue
new file mode 100644
index 0000000..c3264ca
--- /dev/null
+++ b/src/views/account/center/Index.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="page-header-index-wide page-header-wrapper-grid-content-main">
+    <a-row :gutter="24">
+      <a-col :md="24" :lg="7">
+        <a-card :bordered="false">
+          <div class="account-center-avatarHolder">
+            <div class="avatar">
+              <img :src="avatar">
+            </div>
+            <div class="username">{{ nickname }}</div>
+            <div class="bio">海纳百川，有容乃大</div>
+          </div>
+          <div class="account-center-detail">
+            <p>
+              <i class="title"></i>交互专家
+            </p>
+            <p>
+              <i class="group"></i>蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED
+            </p>
+            <p>
+              <i class="address"></i>
+              <span>浙江省</span>
+              <span>杭州市</span>
+            </p>
+          </div>
+          <a-divider/>
+
+          <div class="account-center-tags">
+            <div class="tagsTitle">标签</div>
+            <div>
+              <template v-for="(tag, index) in tags">
+                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
+                  <a-tag
+                    :key="tag"
+                    :closable="index !== 0"
+                    :close="() => handleTagClose(tag)"
+                  >{{ `${tag.slice(0, 20)}...` }}</a-tag>
+                </a-tooltip>
+                <a-tag
+                  v-else
+                  :key="tag"
+                  :closable="index !== 0"
+                  :close="() => handleTagClose(tag)"
+                >{{ tag }}</a-tag>
+              </template>
+              <a-input
+                v-if="tagInputVisible"
+                ref="tagInput"
+                type="text"
+                size="small"
+                :style="{ width: '78px' }"
+                :value="tagInputValue"
+                @change="handleInputChange"
+                @blur="handleTagInputConfirm"
+                @keyup.enter="handleTagInputConfirm"
+              />
+              <a-tag v-else @click="showTagInput" style="background: #fff; borderStyle: dashed;">
+                <a-icon type="plus"/>New Tag
+              </a-tag>
+            </div>
+          </div>
+          <a-divider :dashed="true"/>
+
+          <div class="account-center-team">
+            <div class="teamTitle">团队</div>
+            <a-spin :spinning="teamSpinning">
+              <div class="members">
+                <a-row>
+                  <a-col :span="12" v-for="(item, index) in teams" :key="index">
+                    <a>
+                      <a-avatar size="small" :src="item.avatar"/>
+                      <span class="member">{{ item.name }}</span>
+                    </a>
+                  </a-col>
+                </a-row>
+              </div>
+            </a-spin>
+          </div>
+        </a-card>
+      </a-col>
+      <a-col :md="24" :lg="17">
+        <a-card
+          style="width:100%"
+          :bordered="false"
+          :tabList="tabListNoTitle"
+          :activeTabKey="noTitleKey"
+          @tabChange="key => handleTabChange(key, 'noTitleKey')"
+        >
+          <article-page v-if="noTitleKey === 'article'"></article-page>
+          <app-page v-else-if="noTitleKey === 'app'"></app-page>
+          <project-page v-else-if="noTitleKey === 'project'"></project-page>
+        </a-card>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { PageView, RouteView } from '@/layouts'
+import { AppPage, ArticlePage, ProjectPage } from './page'
+
+import { mapGetters } from 'vuex'
+
+export default {
+  components: {
+    RouteView,
+    PageView,
+    AppPage,
+    ArticlePage,
+    ProjectPage
+  },
+  data () {
+    return {
+      tags: ['很有想法的', '专注设计', '辣~', '大长腿', '川妹子', '海纳百川'],
+
+      tagInputVisible: false,
+      tagInputValue: '',
+
+      teams: [],
+      teamSpinning: true,
+
+      tabListNoTitle: [
+        {
+          key: 'article',
+          tab: '文章(8)'
+        },
+        {
+          key: 'app',
+          tab: '应用(8)'
+        },
+        {
+          key: 'project',
+          tab: '项目(8)'
+        }
+      ],
+      noTitleKey: 'app'
+    }
+  },
+  computed: {
+    ...mapGetters(['nickname', 'avatar'])
+  },
+  mounted () {
+    this.getTeams()
+  },
+  methods: {
+    getTeams () {
+      this.$http.get('/workplace/teams').then(res => {
+        this.teams = res.result
+        this.teamSpinning = false
+      })
+    },
+
+    handleTabChange (key, type) {
+      this[type] = key
+    },
+
+    handleTagClose (removeTag) {
+      const tags = this.tags.filter(tag => tag !== removeTag)
+      this.tags = tags
+    },
+
+    showTagInput () {
+      this.tagInputVisible = true
+      this.$nextTick(() => {
+        this.$refs.tagInput.focus()
+      })
+    },
+
+    handleInputChange (e) {
+      this.tagInputValue = e.target.value
+    },
+
+    handleTagInputConfirm () {
+      const inputValue = this.tagInputValue
+      let tags = this.tags
+      if (inputValue && !tags.includes(inputValue)) {
+        tags = [...tags, inputValue]
+      }
+
+      Object.assign(this, {
+        tags,
+        tagInputVisible: false,
+        tagInputValue: ''
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.page-header-wrapper-grid-content-main {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  transition: 0.3s;
+
+  .account-center-avatarHolder {
+    text-align: center;
+    margin-bottom: 24px;
+
+    & > .avatar {
+      margin: 0 auto;
+      width: 104px;
+      height: 104px;
+      margin-bottom: 20px;
+      border-radius: 50%;
+      overflow: hidden;
+      img {
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    .username {
+      color: rgba(0, 0, 0, 0.85);
+      font-size: 20px;
+      line-height: 28px;
+      font-weight: 500;
+      margin-bottom: 4px;
+    }
+  }
+
+  .account-center-detail {
+    p {
+      margin-bottom: 8px;
+      padding-left: 26px;
+      position: relative;
+    }
+
+    i {
+      position: absolute;
+      height: 14px;
+      width: 14px;
+      left: 0;
+      top: 4px;
+      background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
+    }
+
+    .title {
+      background-position: 0 0;
+    }
+    .group {
+      background-position: 0 -22px;
+    }
+    .address {
+      background-position: 0 -44px;
+    }
+  }
+
+  .account-center-tags {
+    .ant-tag {
+      margin-bottom: 8px;
+    }
+  }
+
+  .account-center-team {
+    .members {
+      a {
+        display: block;
+        margin: 12px 0;
+        line-height: 24px;
+        height: 24px;
+        .member {
+          font-size: 14px;
+          color: rgba(0, 0, 0, 0.65);
+          line-height: 24px;
+          max-width: 100px;
+          vertical-align: top;
+          margin-left: 12px;
+          transition: all 0.3s;
+          display: inline-block;
+        }
+        &:hover {
+          span {
+            color: #1890ff;
+          }
+        }
+      }
+    }
+  }
+
+  .tagsTitle,
+  .teamTitle {
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.85);
+    margin-bottom: 12px;
+  }
+}
+</style>
diff --git a/src/views/form/basicForm/Index.vue b/src/views/form/basicForm/Index.vue
new file mode 100644
index 0000000..894ab73
--- /dev/null
+++ b/src/views/form/basicForm/Index.vue
@@ -0,0 +1,134 @@
+<template>
+  <!-- hidden PageHeaderWrapper title demo -->
+  <page-header-wrapper :title="false" content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。">
+    <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
+      <a-form @submit="handleSubmit" :form="form">
+        <a-form-item
+          label="标题"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+          <a-input
+            v-decorator="[
+              'name',
+              {rules: [{ required: true, message: '请输入标题' }]}
+            ]"
+            name="name"
+            placeholder="给目标起个名字" />
+        </a-form-item>
+        <a-form-item
+          label="起止日期"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+          <a-range-picker
+            name="buildTime"
+            style="width: 100%"
+            v-decorator="[
+              'buildTime',
+              {rules: [{ required: true, message: '请选择起止日期' }]}
+            ]" />
+        </a-form-item>
+        <a-form-item
+          label="目标描述"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+          <a-textarea
+            rows="4"
+            placeholder="请输入你阶段性工作目标"
+            v-decorator="[
+              'description',
+              {rules: [{ required: true, message: '请输入目标描述' }]}
+            ]" />
+        </a-form-item>
+        <a-form-item
+          label="衡量标准"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+          <a-textarea
+            rows="4"
+            placeholder="请输入衡量标准"
+            v-decorator="[
+              'type',
+              {rules: [{ required: true, message: '请输入衡量标准' }]}
+            ]" />
+        </a-form-item>
+        <a-form-item
+          label="客户"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
+          <a-input
+            placeholder="请描述你服务的客户，内部客户直接 @姓名／工号"
+            v-decorator="[
+              'customer',
+              {rules: [{ required: true, message: '请描述你服务的客户' }]}
+            ]" />
+        </a-form-item>
+        <a-form-item
+          label="邀评人"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+          :required="false"
+        >
+          <a-input placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
+        </a-form-item>
+        <a-form-item
+          label="权重"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+          :required="false"
+        >
+          <a-input-number :min="0" :max="100" />
+          <span> %</span>
+        </a-form-item>
+        <a-form-item
+          label="目标公开"
+          :labelCol="{lg: {span: 7}, sm: {span: 7}}"
+          :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
+          :required="false"
+          help="客户、邀评人默认被分享"
+        >
+          <a-radio-group v-decorator="['target', { initialValue: 1 }]">
+            <a-radio :value="1">公开</a-radio>
+            <a-radio :value="2">部分公开</a-radio>
+            <a-radio :value="3">不公开</a-radio>
+          </a-radio-group>
+          <a-form-item v-show="form.getFieldValue('target') === 2">
+            <a-select mode="multiple">
+              <a-select-option value="4">同事一</a-select-option>
+              <a-select-option value="5">同事二</a-select-option>
+              <a-select-option value="6">同事三</a-select-option>
+            </a-select>
+          </a-form-item>
+        </a-form-item>
+        <a-form-item
+          :wrapperCol="{ span: 24 }"
+          style="text-align: center"
+        >
+          <a-button htmlType="submit" type="primary">提交</a-button>
+          <a-button style="margin-left: 8px">保存</a-button>
+        </a-form-item>
+      </a-form>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+export default {
+  name: 'BaseForm',
+  data () {
+    return {
+      form: this.$form.createForm(this)
+    }
+  },
+  methods: {
+    // handler
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (!err) {
+          console.log('Received values of form: ', values)
+        }
+      })
+    }
+  }
+}
+</script>
diff --git a/src/views/profile/basic/Index.vue b/src/views/profile/basic/Index.vue
new file mode 100644
index 0000000..b4cd8c1
--- /dev/null
+++ b/src/views/profile/basic/Index.vue
@@ -0,0 +1,249 @@
+<template>
+  <page-header-wrapper>
+    <a-card :bordered="false">
+      <a-descriptions title="退款申请">
+        <a-descriptions-item label="取货单号">1000000000</a-descriptions-item>
+        <a-descriptions-item label="状态">已取货</a-descriptions-item>
+        <a-descriptions-item label="销售单号">1234123421</a-descriptions-item>
+        <a-descriptions-item label="子订单">3214321432</a-descriptions-item>
+      </a-descriptions>
+      <a-divider style="margin-bottom: 32px"/>
+      <a-descriptions title="用户信息">
+        <a-descriptions-item label="用户姓名">测试用户</a-descriptions-item>
+        <a-descriptions-item label="联系电话">18100000000</a-descriptions-item>
+        <a-descriptions-item label="常用快递">菜鸟仓储</a-descriptions-item>
+        <a-descriptions-item label="取货地址">浙江省杭州市西湖区万塘路18号</a-descriptions-item>
+        <a-descriptions-item label="备注">	无</a-descriptions-item>
+      </a-descriptions>
+      <a-divider style="margin-bottom: 32px"/>
+
+      <div class="title">退货商品</div>
+      <s-table
+        style="margin-bottom: 24px"
+        row-key="id"
+        :columns="goodsColumns"
+        :data="loadGoodsData">
+
+      </s-table>
+
+      <div class="title">退货进度</div>
+      <s-table
+        style="margin-bottom: 24px"
+        row-key="key"
+        :columns="scheduleColumns"
+        :data="loadScheduleData">
+
+        <template
+          slot="status"
+          slot-scope="status">
+          <a-badge :status="status" :text="status | statusFilter"/>
+        </template>
+
+      </s-table>
+    </a-card>
+  </page-header-wrapper>
+</template>
+
+<script>
+import { STable } from '@/components'
+
+export default {
+  components: {
+    STable
+  },
+  data () {
+    return {
+      goodsColumns: [
+        {
+          title: '商品编号',
+          dataIndex: 'id',
+          key: 'id'
+        },
+        {
+          title: '商品名称',
+          dataIndex: 'name',
+          key: 'name'
+        },
+        {
+          title: '商品条码',
+          dataIndex: 'barcode',
+          key: 'barcode'
+        },
+        {
+          title: '单价',
+          dataIndex: 'price',
+          key: 'price',
+          align: 'right'
+        },
+        {
+          title: '数量（件）',
+          dataIndex: 'num',
+          key: 'num',
+          align: 'right'
+        },
+        {
+          title: '金额',
+          dataIndex: 'amount',
+          key: 'amount',
+          align: 'right'
+        }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadGoodsData: () => {
+        return new Promise(resolve => {
+          resolve({
+            data: [
+              {
+                id: '1234561',
+                name: '矿泉水 550ml',
+                barcode: '12421432143214321',
+                price: '2.00',
+                num: '1',
+                amount: '2.00'
+              },
+              {
+                id: '1234562',
+                name: '凉茶 300ml',
+                barcode: '12421432143214322',
+                price: '3.00',
+                num: '2',
+                amount: '6.00'
+              },
+              {
+                id: '1234563',
+                name: '好吃的薯片',
+                barcode: '12421432143214323',
+                price: '7.00',
+                num: '4',
+                amount: '28.00'
+              },
+              {
+                id: '1234564',
+                name: '特别好吃的蛋卷',
+                barcode: '12421432143214324',
+                price: '8.50',
+                num: '3',
+                amount: '25.50'
+              }
+            ],
+            pageSize: 10,
+            pageNo: 1,
+            totalPage: 1,
+            totalCount: 10
+          })
+        }).then(res => {
+          return res
+        })
+      },
+
+      scheduleColumns: [
+        {
+          title: '时间',
+          dataIndex: 'time',
+          key: 'time'
+        },
+        {
+          title: '当前进度',
+          dataIndex: 'rate',
+          key: 'rate'
+        },
+        {
+          title: '状态',
+          dataIndex: 'status',
+          key: 'status',
+          scopedSlots: { customRender: 'status' }
+        },
+        {
+          title: '操作员ID',
+          dataIndex: 'operator',
+          key: 'operator'
+        },
+        {
+          title: '耗时',
+          dataIndex: 'cost',
+          key: 'cost'
+        }
+      ],
+      loadScheduleData: () => {
+        return new Promise(resolve => {
+          resolve({
+            data: [
+              {
+                key: '1',
+                time: '2017-10-01 14:10',
+                rate: '联系客户',
+                status: 'processing',
+                operator: '取货员 ID1234',
+                cost: '5mins'
+              },
+              {
+                key: '2',
+                time: '2017-10-01 14:05',
+                rate: '取货员出发',
+                status: 'success',
+                operator: '取货员 ID1234',
+                cost: '1h'
+              },
+              {
+                key: '3',
+                time: '2017-10-01 13:05',
+                rate: '取货员接单',
+                status: 'success',
+                operator: '取货员 ID1234',
+                cost: '5mins'
+              },
+              {
+                key: '4',
+                time: '2017-10-01 13:00',
+                rate: '申请审批通过',
+                status: 'success',
+                operator: '系统',
+                cost: '1h'
+              },
+              {
+                key: '5',
+                time: '2017-10-01 12:00',
+                rate: '发起退货申请',
+                status: 'success',
+                operator: '用户',
+                cost: '5mins'
+              }
+            ],
+            pageSize: 10,
+            pageNo: 1,
+            totalPage: 1,
+            totalCount: 10
+          })
+        }).then(res => {
+          return res
+        })
+      }
+    }
+  },
+  filters: {
+    statusFilter (status) {
+      const statusMap = {
+        'processing': '进行中',
+        'success': '完成',
+        'failed': '失败'
+      }
+      return statusMap[status]
+    }
+  },
+  computed: {
+    title () {
+      return this.$route.meta.title
+    }
+  }
+
+}
+</script>
+
+<style lang="less" scoped>
+  .title {
+    color: rgba(0,0,0,.85);
+    font-size: 16px;
+    font-weight: 500;
+    margin-bottom: 16px;
+  }
+</style>