fix：修复产品管理功能BUG

.env.development

@@ -3,10 +3,10 @@
 VUE_APP_TENANT=default
 
 # GateWay地址
-VUE_APP_MicroSrvProxy_API=http://192.168.0.252:8100/
+VUE_APP_MicroSrvProxy_API=http://127.0.0.1:9981/
 
 # 登录验证微服务名称
-VUE_APP_AdminPath=dashoo.labsop.lims_latest_opms_admin
+VUE_APP_AdminPath=dashoo.opms.admin-0.0.1
 
 # 业务接口微服务名称
-VUE_APP_ParentPath=dashoo.labsop.lims_latest_opms_parent
+VUE_APP_ParentPath=dashoo.opms.parent-0.0.1

src/api/product.js → src/api/base/product.js

@@ -3,12 +3,6 @@ import micro_request from '@/utils/micro_request'
 const basePath = process.env.VUE_APP_ParentPath
 console.log(basePath)
 export default {
-  login(query) {
-    return micro_request.postRequest(basePath, 'Auth', 'Login', query)
-  },
-  logout(query) {
-    return micro_request.postRequest(basePath, 'Auth', 'LogOut', query)
-  },
   // 获取列表
   getList(query) {
     return micro_request.postRequest(basePath, 'Product', 'GetList', query)
@@ -22,7 +16,7 @@ export default {
   doDelete(query) {
     return micro_request.postRequest(basePath, 'Product', 'DeleteByIds', query)
   },
-  doGetEntityById(query) {
+  getDetails(query) {
     return micro_request.postRequest(basePath, 'Product', 'GetEntityById', query)
   },
 }

src/components/select/SelectProduct.vue

@@ -62,9 +62,9 @@
 </template>
 
 <script>
-  import productApi from '@/api/product'
+  import productApi from '@/api/base/product'
   import TableTool from '@/components/table/TableTool'
-  import ProductEdit from '@/views/product/components/ProductEdit'
+  import ProductEdit from '@/views/base/product/components/ProductEdit'
 
   export default {
     name: 'SelectProduct',

src/views/base/product/components/ProductEdit.vue

@@ -0,0 +1,177 @@
+<!--
+ * @Author: WangXingCheng wangxingcheng@dashoo.cn
+ * @Date: 2023-01-10 12:53:25
+ * @LastEditors: wanglj
+ * @LastEditTime: 2023-01-10 18:07:31
+ * @Description: file content
+ * @FilePath: /opms_frontend/src/views/base/product/components/ProductEdit.vue
+-->
+
+<template>
+  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
+    <el-form ref="editForm" :disabled="formDisavled" :model="editForm" :rules="rules">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="产品编码" prop="prodCode">
+            <el-input v-model="editForm.prodCode" placeholder="请输入产品编码" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="产品名称" prop="prodName">
+            <el-input v-model="editForm.prodName" placeholder="请输入产品名称" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="产品分类" prop="prodClass">
+            <el-select v-model="editForm.prodClass" placeholder="请选择产品分类" style="width: 100%">
+              <el-option v-for="item in classOptions" :key="item.value" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="成交价" prop="distPrice">
+            <currency v-model.trim="editForm.distPrice" :value="1" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="经销商价" prop="guidPrice">
+            <currency v-model.trim="editForm.guidPrice" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="签约代理价" prop="agentPrice">
+            <currency v-model.trim="editForm.agentPrice" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item label="市场报价" prop="marketPrice">
+            <currency v-model.trim="editForm.marketPrice" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item label="产品说明" prop="remark">
+        <el-input
+          v-model="editForm.remark"
+          maxlength="500"
+          placeholder="请输入产品说明"
+          resize="none"
+          :rows="5"
+          show-word-limit
+          type="textarea" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer">
+      <el-button v-show="!formDisavled" type="primary" @click="save">确 定</el-button>
+      <el-button @click="dialogFormVisible = false">取消</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+  import to from 'await-to-js'
+  import productApi from '@/api/base/product'
+  import currency from '@/components/currency'
+
+  export default {
+    //name: 'UserEdit',
+    components: {
+      currency,
+    },
+    data() {
+      return {
+        title: '',
+        dialogFormVisible: false,
+        formDisavled: false, //表单禁用
+        editForm: {
+          prodCode: '', //产品编码
+          prodName: '', //产品名称
+          prodClass: '', //产品类别
+          guidPrice: '', //建议成交价
+          distPrice: '', //经销商价格
+          custStatus: '', //代理商价格
+          agentPrice: '', //目标价格
+          marketPrice: '', //市场价
+          remark: '', //产品说明
+        },
+        rules: {
+          prodCode: [{ required: true, trigger: 'blur', message: '请输入产品编码' }],
+          prodName: [{ required: true, trigger: 'blur', message: '请输入产品名称' }],
+          prodClass: [{ required: true, trigger: 'blur', message: '请输入产品分类' }],
+          guidPrice: [{ required: true, trigger: 'blur', message: '请输入建议成交价' }],
+          distPrice: [{ required: true, trigger: 'blur', message: '请输入经销商价' }],
+        },
+        classOptions: [], //产品分类
+      }
+    },
+    mounted() {
+      this.getOptions()
+    },
+    methods: {
+      async init(id, disabled = false) {
+        this.formDisavled = disabled
+        if (!id) {
+          this.title = '新增产品信息'
+        } else {
+          this.title = '编辑产品信息'
+          let params = { id }
+          console.log('params----', params)
+          const [err, res] = await to(productApi.getDetails(params))
+          console.log(res)
+          if (err) return
+          if (res.data) {
+            this.editForm = res.data
+          }
+        }
+        this.dialogFormVisible = true
+      },
+      getOptions() {
+        Promise.all([this.getDicts('product_type')])
+          .then(([productType]) => {
+            this.classOptions = productType.data.values || []
+          })
+          .catch((err) => console.log(err))
+      },
+      handleClose() {
+        this.editForm = {
+          prodCode: '', //产品编码
+          prodName: '', //产品名称
+          prodClass: '', //产品类别
+          guidPrice: '', //建议成交价
+          distPrice: '', //经销商价格
+          custStatus: '', //代理商价格
+          agentPrice: '', //目标价格
+          marketPrice: '', //市场价
+          remark: '', //产品说明
+        }
+        this.$refs.editForm.resetFields()
+      },
+
+      save() {
+        this.$refs['editForm'].validate(async (valid) => {
+          if (valid) {
+            if (this.editForm.id) {
+              this.editForm.guidPrice = parseFloat(this.editForm.guidPrice).toFixed(2)
+              this.editForm.distPrice = parseFloat(this.editForm.distPrice).toFixed(2)
+              this.editForm.agentPrice = parseFloat(this.editForm.agentPrice).toFixed(2)
+              this.editForm.marketPrice = parseFloat(this.editForm.marketPrice).toFixed(2)
+              const { msg } = await productApi.doEdit(this.editForm)
+              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            } else {
+              this.editForm.guidPrice = parseFloat(this.editForm.guidPrice).toFixed(2)
+              const { msg } = await productApi.doAdd(this.editForm)
+              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
+            }
+            this.$emit('fetch-data')
+            this.editVisible = false
+          }
+        })
+      },
+    },
+  }
+</script>

src/views/product/index.vue → src/views/base/product/index.vue

@@ -3,21 +3,18 @@
     <vab-query-form>
       <vab-query-form-top-panel>
         <el-form :inline="true" :model="queryForm" @submit.native.prevent>
-          <el-col :span="5">
-            <el-form-item>
-              <el-input v-model.trim="queryForm.prodCode" clearable placeholder="产品编码" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="5">
-            <el-form-item>
-              <el-input v-model.trim="queryForm.prodClass" clearable placeholder="产品类别" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="5">
-            <el-form-item>
-              <el-input v-model.trim="queryForm.prodName" clearable placeholder="产品名称" />
-            </el-form-item>
-          </el-col>
+          <el-form-item>
+            <el-input v-model.trim="queryForm.prodCode" clearable placeholder="产品编码" />
+          </el-form-item>
+
+          <el-form-item>
+            <el-input v-model.trim="queryForm.prodName" clearable placeholder="产品名称" />
+          </el-form-item>
+          <el-form-item>
+            <el-select v-model="queryForm.prodClass" placeholder="产品类别" style="width: 100%">
+              <el-option v-for="item in classOptions" :key="item.value" :label="item.value" :value="item.value" />
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
             <el-button icon="el-icon-refresh-right" @click="reset">重置</el-button>
@@ -30,10 +27,14 @@
     </vab-query-form-left-panel>
     <vab-query-form-right-panel>
       <table-tool :check-list.sync="checkList" :columns="columns" />
-      <el-button icon="el-icon-download" style="float: right" />
     </vab-query-form-right-panel>
 
     <el-table v-loading="listLoading" border :data="list" :height="height" @selection-change="setSelectRows">
+      <el-table-column align="center" label="序号" show-overflow-tooltip width="80">
+        <template #default="{ $index }">
+          {{ $index + 1 }}
+        </template>
+      </el-table-column>
       <el-table-column
         v-for="(item, index) in finallyColumns"
         :key="index"
@@ -44,28 +45,32 @@
         :sortable="item.sortable"
         :width="item.width">
         <template #default="{ row }">
-          <!-- <span v-if="item.prop === 'prodName'">
-        {{ row.prodName }}
-      </span> -->
           <el-button v-if="item.prop === 'prodName'" style="font-size: 14px" type="text" @click="handleDetail(row)">
             {{ row.prodName }}
           </el-button>
-          <span v-if="item.prop === 'prodClass'">
+          <span v-else-if="item.prop === 'prodClass'">
             {{ row.prodClass }}
           </span>
-          <span v-if="item.prop === 'prodCode'">
+          <span v-else-if="item.prop === 'prodCode'">
             {{ row.prodCode }}
           </span>
-          <span v-if="item.prop === 'agentPrice'">{{ parseFloat(row.agentPrice.toFixed(2)).toLocaleString() }}¥</span>
-          <span v-if="item.prop === 'distPrice'">{{ parseFloat(row.distPrice.toFixed(2)).toLocaleString() }}¥</span>
-          <span v-if="item.prop === 'guidPrice'">{{ parseFloat(row.guidPrice.toFixed(2)).toLocaleString() }}¥</span>
-          <span v-if="item.prop === 'marketPrice'">{{ parseFloat(row.marketPrice.toFixed(2)).toLocaleString() }}¥</span>
+          <span v-else-if="item.prop === 'agentPrice'">
+            {{ formatPrice(row.agentPrice) }}
+          </span>
+          <span v-else-if="item.prop === 'distPrice'">
+            {{ formatPrice(row.distPrice) }}
+          </span>
+          <span v-else-if="item.prop === 'guidPrice'">
+            {{ formatPrice(row.guidPrice) }}
+          </span>
+          <span v-else-if="item.prop === 'marketPrice'">
+            {{ formatPrice(row.marketPrice) }}
+          </span>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="操作" show-overflow-tooltip width="95">
+      <el-table-column align="center" label="操作" show-overflow-tooltip width="160">
         <template #default="{ row }">
           <el-button type="text" @click="handleEdit(row)">编辑</el-button>
-          <!-- <el-button type="text" @click="showDefail(row)">详情</el-button> -->
           <el-button type="text" @click="handleDelete(row)">删除</el-button>
         </template>
       </el-table-column>
@@ -87,7 +92,7 @@
 
 <script>
   import Edit from './components/ProductEdit'
-  import productApi from '@/api/product'
+  import productApi from '@/api/base/product'
   import TableTool from '@/components/table/TableTool'
 
   export default {
@@ -106,50 +111,53 @@
         },
         checkList: [],
         columns: [
+          {
+            label: '产品型号',
+            width: '160px',
+            prop: 'prodCode',
+            sortable: false,
+            disableCheck: true,
+          },
           {
             label: '产品名称',
-            width: '120px',
             prop: 'prodName',
             sortable: false,
+            disableCheck: true,
           },
           {
             label: '产品类别',
-            width: 'auto',
+            width: '160px',
             prop: 'prodClass',
             sortable: false,
             disableCheck: true,
           },
-          {
-            label: '产品型号',
-            width: 'auto',
-            prop: 'prodCode',
-            sortable: false,
-          },
+
           {
             label: '签约代理价',
-            width: 'auto',
+            width: '160px',
             prop: 'agentPrice',
             sortable: false,
           },
           {
             label: '经销商价',
-            width: 'auto',
+            width: '160px',
             prop: 'distPrice',
-            sortable: true,
+            sortable: false,
           },
           {
             label: '建议成交价',
-            width: 'auto',
+            width: '160px',
             prop: 'guidPrice',
-            sortable: true,
+            sortable: false,
           },
           {
             label: '市场报价',
-            width: 'auto',
+            width: '160px',
             prop: 'marketPrice',
-            sortable: true,
+            sortable: false,
           },
         ],
+        classOptions: [], //产品分类
       }
     },
     computed: {
@@ -162,6 +170,7 @@
       },
     },
     created() {
+      this.getOptions()
       this.fetchData()
     },
     methods: {
@@ -177,21 +186,24 @@
           prodName: '',
         }
       },
+      getOptions() {
+        Promise.all([this.getDicts('product_type')])
+          .then(([productType]) => {
+            this.classOptions = productType.data.values || []
+          })
+          .catch((err) => console.log(err))
+      },
+
       //详情
       handleDetail(row) {
-        this.$router.push({
-          path: '/base/detail',
-          query: {
-            id: row.id,
-          },
-        })
+        this.$refs['edit'].init(row.id, true)
       },
 
       handleEdit(row) {
         if (row.id) {
-          this.$refs['edit'].showEdit(row)
+          this.$refs['edit'].init(row.id)
         } else {
-          this.$refs['edit'].showEdit()
+          this.$refs['edit'].init()
         }
       },
 

src/views/product/components/ProductEdit.vue

@@ -1,169 +0,0 @@
-<!-- <template> -->
-<!-- <el-dialog
-    :title="title"
-    :visible.sync="dialogFormVisible"
-    @close="close">
-    <el-form ref="form" label-width="80px" :model="form" :rules="rules">
-      <el-form-item label="产品编码" prop="prodCode">
-        <el-input v-model.trim="form.prodCode" style="width:150px;"/>
-      </el-form-item>
-      <el-form-item label="产品名称" prop="prodName">
-        <el-input v-model.trim="form.prodName" />
-      </el-form-item>
-      <el-form-item label="产品分类" prop="prodClass">
-        <el-input v-model.trim="form.prodClass" />
-      </el-form-item>
-      <el-form-item label="成交价" prop="guidPrice">
-        <el-input v-model.trim="form.guidPrice" />
-      </el-form-item>
-      <el-form-item label="经销商价" prop="distPrice">
-        <el-input v-model.trim="form.distPrice" />
-      </el-form-item>
-      <el-form-item label="签约代理价" prop="agentPrice">
-        <el-input v-model.trim="form.agentPrice" />
-      </el-form-item>
-      <el-form-item label="市场报价" prop="marketPrice">
-        <el-input v-model.trim="form.marketPrice" />
-      </el-form-item>
-      <el-form-item label="备注" prop="remark">
-        <el-input v-model.trim="form.remark" type="textarea" />
-      </el-form-item>
-    </el-form>
-    <template #footer>
-      <el-button @click="close">取 消</el-button>
-      <el-button type="primary" @click="save">确 定</el-button>
-    </template>
-  </el-dialog>
-</template> -->
-<template>
-  <el-dialog append-to-body :title="title" :visible.sync="dialogFormVisible" @close="handleClose">
-    <el-form ref="form" :model="form" :rules="rules">
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="产品名称" prop="prodName">
-            <el-input v-model="form.prodName" placeholder="请输入产品名称" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="产品分类" prop="prodClass">
-            <el-input v-model="form.prodClass" placeholder="请输入产品分类" />
-            <!-- <el-select v-model="form.prodClass" placeholder="请选择客户行业" style="width: 100%">
-                        <el-option v-for="item in industryOptions" :key="item.value" :label="item.value" :value="item.value" />
-                      </el-select> -->
-          </el-form-item>
-        </el-col>
-      </el-row>
-      <el-row :gutter="20">
-        <el-col :span="12">
-          <el-form-item label="成交价" prop="distPrice">
-            <el-input v-model.trim="form.distPrice" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="经销商价" prop="guidPrice">
-            <el-input v-model.trim="form.guidPrice" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="签约代理价" prop="agentPrice">
-            <el-input v-model.trim="form.agentPrice" />
-          </el-form-item>
-        </el-col>
-        <el-col :span="12">
-          <el-form-item label="市场报价" prop="marketPrice">
-            <el-input v-model.trim="form.marketPrice" />
-          </el-form-item>
-        </el-col>
-      </el-row>
-
-      <el-form-item label="备注" prop="remark">
-        <el-input
-          v-model="form.remark"
-          maxlength="500"
-          placeholder="请输入备注"
-          resize="none"
-          :rows="5"
-          show-word-limit
-          type="textarea" />
-      </el-form-item>
-    </el-form>
-    <span slot="footer">
-      <el-button @click="close">取 消</el-button>
-      <el-button type="primary" @click="save">确 定</el-button>
-    </span>
-  </el-dialog>
-</template>
-<script>
-  import productApi from '@/api/product'
-
-  export default {
-    //name: 'UserEdit',
-    data() {
-      return {
-        form: {
-          roles: [],
-        },
-        rules: {
-          prodName: [{ required: true, trigger: 'blur', message: '请输入名称' }],
-          prodClass: [{ required: true, trigger: 'blur', message: '请输入分类' }],
-          guidPrice: [{ required: true, trigger: 'blur', message: '请输入建议成交价' }],
-          distPrice: [{ required: true, trigger: 'blur', message: '请输入经销商价' }],
-        },
-        title: '',
-        dialogFormVisible: false,
-      }
-    },
-    methods: {
-      showEdit(row) {
-        if (!row) {
-          this.title = '添加'
-        } else {
-          this.title = '编辑'
-          this.form = Object.assign({}, row)
-        }
-        this.dialogFormVisible = true
-      },
-      close() {
-        this.$refs['form'].resetFields()
-        this.form = this.$options.data().form
-        this.dialogFormVisible = false
-      },
-      handleClose() {
-        this.Form = {
-          prodCode: '', //
-          prodClass: '', //
-          guidPrice: '', //
-          distPrice: '', //
-          custStatus: '', //
-          agentPrice: '', //
-          marketPrice: '', //
-          remark: '', //
-        }
-        this.$refs.editForm.resetFields()
-      },
-
-      save() {
-        this.$refs['form'].validate(async (valid) => {
-          if (valid) {
-            if (this.form.id) {
-              this.form.guidPrice = parseFloat(this.form.guidPrice).toFixed(2)
-              this.form.distPrice = parseFloat(this.form.distPrice).toFixed(2)
-              this.form.agentPrice = parseFloat(this.form.agentPrice).toFixed(2)
-              this.form.marketPrice = parseFloat(this.form.marketPrice).toFixed(2)
-              console.log(this.form)
-              const { msg } = await productApi.doEdit(this.form)
-              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
-            } else {
-              this.form.guidPrice = parseFloat(this.form.guidPrice).toFixed(2)
-              console.log(this.form)
-              const { msg } = await productApi.doAdd(this.form)
-              this.$baseMessage(msg, 'success', 'vab-hey-message-success')
-            }
-            this.$emit('fetch-data')
-            this.close()
-          }
-        })
-      },
-    },
-  }
-</script>

src/views/product/detail.vue

@@ -1,391 +0,0 @@
-<template>
-  <div class="detail">
-    <el-row :gutter="30">
-      <el-col :span="25">
-        <div class="title">
-          <p>产品名称</p>
-          <h3>
-            {{ detail.prodName }}
-          </h3>
-        </div>
-        <header>
-          <el-descriptions :colon="false" :column="8" direction="vertical">
-            <el-descriptions-item content-class-name="my-content" label="产品分类" label-class-name="my-label">
-              {{ detail.prodClass }}
-            </el-descriptions-item>
-            <el-descriptions-item content-class-name="my-content" label="产品编码" label-class-name="my-label">
-              {{ detail.prodCode }}
-            </el-descriptions-item>
-            <el-descriptions-item content-class-name="my-content" label="建议成交价" label-class-name="my-label">
-              {{ parseFloat(parseInt(detail.guidPrice).toFixed(2)).toLocaleString() }}¥
-            </el-descriptions-item>
-            <el-descriptions-item content-class-name="my-content" label="经销商价" label-class-name="my-label">
-              {{ parseFloat(parseInt(detail.distPrice).toFixed(2)).toLocaleString() }}¥
-            </el-descriptions-item>
-            <el-descriptions-item content-class-name="my-content" label="签约代理价" label-class-name="my-label">
-              {{ parseFloat(parseInt(detail.agentPrice).toFixed(2)).toLocaleString() }}¥
-            </el-descriptions-item>
-            <el-descriptions-item content-class-name="my-content" label="市场报价" label-class-name="my-label">
-              {{ parseFloat(parseInt(detail.marketPrice).toFixed(2)).toLocaleString() }}¥
-            </el-descriptions-item>
-            <el-descriptions-item content-class-name="my-content" label="创建人" label-class-name="my-label">
-              {{ detail.createdName }}
-            </el-descriptions-item>
-            <el-descriptions-item content-class-name="my-content" label="创建时间" label-class-name="my-label">
-              {{ detail.createdTime }}
-            </el-descriptions-item>
-          </el-descriptions>
-        </header>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-  import { mapGetters } from 'vuex'
-  import api from '@/api/product'
-
-  export default {
-    name: 'Detail',
-    components: {},
-    data() {
-      return {
-        id: '',
-        privateCus: '',
-        list: [],
-        detail: {
-          prodClass: '', //产品分类
-          prodCode: '', //产品编码
-          guidPrice: '', //建议成交价
-          distPrice: '', //经销商价
-          agentPrice: '', //签约代理价
-          marketPrice: '', //市场报价
-          createdName: '', //创建人
-          createdTime: '', //创建时间
-        },
-      }
-    },
-    computed: {
-      ...mapGetters({
-        avatar: 'user/avatar',
-        username: 'user/username',
-      }),
-    },
-    mounted() {
-      this.id = this.$route.query.id
-      this.privateCus = this.$route.query.privateCus
-      this.init()
-      //this.getDynamics()
-    },
-    methods: {
-      async init() {
-        Promise.all([api.doGetEntityById({ id: parseInt(this.id) })]).then(([detail]) => {
-          console.log('detail', detail)
-          this.detail = detail.data.list
-        })
-      },
-
-      setSelectRows(val) {
-        this.selectRows = val
-      },
-    },
-  }
-</script>
-
-<style lang="scss" scoped>
-  $base: '.detail';
-
-  #{$base} {
-    height: calc(100vh - 60px - 50px - 12px * 2 - 40px);
-    display: flex;
-    padding: 20px 40px;
-
-    > .el-row {
-      flex: 1;
-
-      > .el-col {
-        height: 100%;
-      }
-    }
-
-    .title {
-      p,
-      h3 {
-        margin: 0;
-      }
-
-      p {
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-      }
-
-      h3 {
-        font-size: 24px;
-        font-weight: 500;
-        line-height: 36px;
-        color: #333;
-        display: flex;
-        justify-content: space-between;
-      }
-    }
-
-    header {
-      height: 74px;
-      background: rgba(196, 196, 196, 0.5);
-      border-radius: 4px;
-      display: flex;
-      align-items: center;
-      padding: 0 20px;
-      margin-top: 16px;
-
-      ::v-deep .el-descriptions__body {
-        background: transparent;
-      }
-
-      ::v-deep .my-label {
-        font-size: 14px;
-        font-weight: 600;
-        color: #1d66dc;
-      }
-
-      ::v-deep .my-content {
-        font-size: 14px;
-        font-weight: 600;
-        color: #333;
-      }
-    }
-
-    .el-tabs {
-      height: calc(100% - 148px);
-      display: flex;
-      flex-direction: column;
-
-      ::v-deep .el-tabs__content {
-        flex: 1;
-
-        .el-tab-pane {
-          height: 100%;
-        }
-      }
-    }
-
-    .buttons {
-      padding-top: 28px;
-      text-align: right;
-    }
-
-    .records {
-      margin: 0;
-      padding: 10px 20px;
-      list-style: none;
-      height: calc(100% - 60px);
-      overflow-y: auto;
-
-      > li {
-        display: flex;
-
-        & + li {
-          margin-top: 10px;
-        }
-      }
-
-      .date {
-        width: 100px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        h2,
-        h3 {
-          margin: 0;
-        }
-
-        h2 {
-          font-size: 26px;
-          line-height: 32px;
-        }
-      }
-
-      .content {
-        flex: 1;
-        list-style: none;
-
-        li {
-          display: flex;
-
-          & + li {
-            margin-top: 10px;
-          }
-        }
-
-        .user-avatar {
-          font-size: 40px;
-        }
-
-        .text {
-          flex: 1;
-          padding-left: 20px;
-
-          p {
-            font-weight: 500;
-            margin: 0;
-            line-height: 20px;
-
-            span {
-              color: #1d66dc;
-            }
-          }
-
-          p:nth-child(2) {
-            margin-bottom: 10px;
-          }
-
-          .action {
-            font-weight: bold;
-            color: #333;
-          }
-        }
-      }
-    }
-
-    .follow {
-      height: 100%;
-      padding: 10px 20px;
-      overflow: auto;
-
-      > li {
-        display: flex;
-
-        + li {
-          margin-top: 10px;
-        }
-      }
-
-      .date {
-        width: 100px;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-
-        h2,
-        h3 {
-          margin: 0;
-        }
-
-        h2 {
-          font-size: 26px;
-          line-height: 32px;
-        }
-      }
-
-      .content {
-        flex: 1;
-        list-style: none;
-
-        > li {
-          border: 1px solid rgb(215, 232, 244);
-          background: rgb(247, 251, 254);
-          border-radius: 4px;
-          padding: 8px;
-          overflow: hidden;
-
-          .text-container {
-            display: flex;
-          }
-
-          .comments {
-            padding-left: 60px;
-            margin-top: 10px;
-            max-height: 200px;
-            overflow: auto;
-
-            li {
-              display: flex;
-              border-top: 1px solid #e3e5e7;
-
-              .text {
-                flex: 1;
-                padding: 0 10px;
-
-                p {
-                  font-weight: 500;
-                  margin: 0;
-                  line-height: 32px;
-                }
-
-                p:first-child {
-                  line-height: 30px;
-                  font-weight: bold;
-                }
-
-                p:last-child {
-                  font-size: 12px;
-                  color: #9499a0;
-                  text-align: right;
-                }
-              }
-            }
-          }
-
-          + li {
-            margin-top: 10px;
-          }
-        }
-
-        .user-avatar {
-          font-size: 40px;
-        }
-
-        .text {
-          flex: 1;
-          padding-left: 20px;
-          padding-right: 10px;
-
-          p {
-            font-weight: 500;
-            margin: 0;
-            line-height: 32px;
-
-            span {
-              color: #1d66dc;
-            }
-          }
-
-          .action {
-            display: flex;
-            justify-content: space-between;
-
-            span:first-child {
-              font-weight: bold;
-              color: #333;
-            }
-          }
-
-          .footer {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-          }
-        }
-      }
-    }
-  }
-
-  .height-enter-active,
-  .height-leave-active {
-    transition: all 0.5s;
-  }
-
-  .height-enter-to,
-  .height-leave {
-    height: 200px;
-  }
-
-  .height-enter,
-.height-leave-to
-
-  /* .fade-leave-active below version 2.1.8 */ {
-    height: 0;
-  }
-</style>