代码暂存

src/Form/QuotedPrice/add.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-button size="mini" type="primary" @click="dialogFormVisible = true">新 增</el-button>
+    <el-button size="small" type="primary" @click="dialogFormVisible = true">新 增</el-button>
     <el-dialog title="新 增" :visible.sync="dialogFormVisible" width="900px">
       <div slot="title" style="font-size: 15px">
         新增报价单

src/HDrpManagement/ProductGroupMag/index.vue

@@ -27,7 +27,9 @@
 
 <script>
 export default {
-  components:{},
+  components:{
+    test
+  },
   name: "index",
   data() {
     return {

src/HDrpManagement/ProductMag/index copy.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <list ref="list" @selectData="selectData">
+      <BtnGroup
+        v-if="tool.checkAuth($route.name,'update')" 
+        :rows="selectRow" 
+        slot="operation"
+        @checkProducts="checkProducts" 
+        @cancel="cancel" 
+        @onSuccess="onSuccess">
+      </BtnGroup>
+      <add v-if="tool.checkAuth($route.name,'insert')" slot="add" @onSuccess="onSuccess"></add>
+      <template v-slot:setclass="scope">
+        <saleClass :data="scope.data" @uploadSuccess="onSuccess"></saleClass>
+      </template>
+      <template v-slot:setimage="scope">
+        <SetImage :data="scope.data" @uploadSuccess="onSuccess"></SetImage>
+      </template>
+      <template v-slot:onsale="scope">
+        <onsale v-if="tool.checkAuth($route.name,'update')"  :data="scope.data" @onSuccess="onSuccess"></onsale>
+      </template>
+      <template v-slot:edit="scope">
+        <edit v-if="tool.checkAuth($route.name,'update')"  :data="scope.data" @onSuccess="onSuccess"></edit>
+      </template>
+      <template v-slot:del="scope">
+        <ondel v-if="tool.checkAuth($route.name,'delete')"  :data="scope.data" @onSuccess="onSuccess"></ondel>
+      </template>
+    </list>
+  </div>
+</template>
+
+<script>
+import add from './modules/add'
+import edit from './modules/edit'
+import ondel from './modules/del'
+import onsale from './modules/onsale'
+import BtnGroup from './modules/BtnGroup'
+import SetImage from './modules/SetImage'
+
+import list from './modules/list'
+import saleClass from './modules/saleClass'
+
+export default {
+  components:{
+    list,
+    add,
+    edit,
+    ondel,
+    onsale,
+    BtnGroup,
+    SetImage,
+    saleClass
+  },
+  data () {
+    return {
+      selectRow:[]
+    }
+  },
+  methods:{
+    onSuccess () {
+      this.$refs['list'].listData()
+    },
+    checkProducts (type) {
+       this.$refs['list'].selection(type)
+    },
+    selectData (data) {
+      this.selectRow = data
+    },
+    cancel () {
+      this.$refs['list'].clearSelection()
+    }
+  }
+}
+
+</script>
+<style>
+</style>
+<style scoped>
+</style>

src/HDrpManagement/ProductMag/index.vue

@@ -1,79 +1,51 @@
+
 <template>
   <div>
-    <list ref="list" @selectData="selectData">
-      <BtnGroup
-        v-if="tool.checkAuth($route.name,'update')" 
-        :rows="selectRow" 
-        slot="operation"
-        @checkProducts="checkProducts" 
-        @cancel="cancel" 
-        @onSuccess="onSuccess">
-      </BtnGroup>
-      <add v-if="tool.checkAuth($route.name,'insert')" slot="add" @onSuccess="onSuccess"></add>
-      <template v-slot:setclass="scope">
-        <saleClass :data="scope.data" @uploadSuccess="onSuccess"></saleClass>
-      </template>
-      <template v-slot:setimage="scope">
-        <SetImage :data="scope.data" @uploadSuccess="onSuccess"></SetImage>
-      </template>
-      <template v-slot:onsale="scope">
-        <onsale v-if="tool.checkAuth($route.name,'update')"  :data="scope.data" @onSuccess="onSuccess"></onsale>
-      </template>
-      <template v-slot:edit="scope">
-        <edit v-if="tool.checkAuth($route.name,'update')"  :data="scope.data" @onSuccess="onSuccess"></edit>
+    <basicLayout 
+      ref="basicLayout" 
+      :oldFormPath="{
+        add:'HDrpManagement/ProductMag/modules'
+      }"
+      tableName="productManageTable" 
+      idName="itemid"
+      ownertable="plm_item"
+      :apiId="{query:20220923140602,del:20220923152202}"
+      :options="options"
+      :detailPath="{
+        path:'/account_details'
+      }">
+      <div slot="custom"></div>
+      <template v-slot:tbList="scope">
+        <div>
+          {{scope.data.column.data[[scope.data.column.columnname]]}}
+        </div>
       </template>
-      <template v-slot:del="scope">
-        <ondel v-if="tool.checkAuth($route.name,'delete')"  :data="scope.data" @onSuccess="onSuccess"></ondel>
+      <template v-slot:tbOpreation="scope">
       </template>
-    </list>
+    </basicLayout>
   </div>
 </template>
 
 <script>
-import add from './modules/add'
-import edit from './modules/edit'
-import ondel from './modules/del'
-import onsale from './modules/onsale'
-import BtnGroup from './modules/BtnGroup'
-import SetImage from './modules/SetImage'
-
-import list from './modules/list'
-import saleClass from './modules/saleClass'
-
+/**
+ * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
+ * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
+ * @param {string} tableName 开发端配置的表格名称
+ * @param {String} idName 数据主id名称
+ * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
+ * @param {Array} options:{label:描述,value:值} 
+ */
 export default {
-  components:{
-    list,
-    add,
-    edit,
-    ondel,
-    onsale,
-    BtnGroup,
-    SetImage,
-    saleClass
-  },
   data () {
     return {
-      selectRow:[]
+      options:[]
+      
     }
   },
   methods:{
-    onSuccess () {
-      this.$refs['list'].listData()
-    },
-    checkProducts (type) {
-       this.$refs['list'].selection(type)
-    },
-    selectData (data) {
-      this.selectRow = data
-    },
-    cancel () {
-      this.$refs['list'].clearSelection()
-    }
   }
 }
 
 </script>
 <style>
-</style>
-<style scoped>
 </style>

src/SDrpManagement/salerPrivatecustomer/detail/modules/operation/sendBack.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-button class="inline-16" style="width:100%" size="mini" v-show="this.name !== this.createby"  block @click="onshow">退回至公海</el-button>
+    <el-button class="inline-16" size="mini" v-show="this.name !== this.createby"  block @click="onshow">退回至公海</el-button>
     <el-dialog title="" :visible.sync="dialogForm" width="400px" append-to-body>
       <div slot="title" style="font-size: 15px">
         退回至公海

src/SDrpManagement/salerPrivatecustomer/index.vue

@@ -98,7 +98,7 @@ export default {
   },
   created() {
 
-  }
+  },
 }
 </script>
 

src/SManagement/sales_forecast/bak/index copy.vue

@@ -1,267 +0,0 @@
-<template>
-  <div class="sales">
-    <div class="container normal-panel">
-      <p class="normal-title normal-margin">预测提报任务</p>
-      <div class="header-handle">
-        <Search @searchActive="searchActive" @clearData="clearData" />
-        <DownSelect @selectChange="categoryChange" @clearCategory="clearCategory" title="提报要求:"
-          :list="[{label:'按产品类别预测',value:'0'},{label:'按项目及产品类别预测',value:'1'}]" style="margin-right:16px" />
-      </div>
-      <tableLayout v-if="salesPanelList" :layout="tablecols" :data="salesPanelList" :custom="true" height="30vh"
-        @rowClick="rowClick" fixedName="operation">
-        <template v-slot:customcol="scope">
-          <div v-if="scope.column.columnname == 'periodtype'">
-            <span>
-              {{scope.column.data.periodpoint | timer(scope.column.data[scope.column.columnname])}}
-            </span>
-          </div>
-          <div v-else-if="scope.column.columnname == 'baseonproject'">
-            <span v-if="scope.column.data[scope.column.columnname] == '1'">按项目及产品类别预测</span>
-            <span v-else>按产品类别预测</span>
-          </div>
-          <div v-else-if="scope.column.columnname == 'date'">
-            <span>{{scope.column.data.begdate}}至{{scope.column.data.enddate}}</span>
-          </div>
-          <div v-else-if="scope.column.columnname == 'status'">
-            <span :style="scope.column.data[scope.column.columnname] == '发布' ? 'color: rgb(82, 196, 26)' : ''">{{scope.column.data[scope.column.columnname]}}</span>
-          </div>
-          <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
-        </template>
-        <template v-slot:opreation="scope">
-          <el-button type="text" size="small" @click="addBuill(scope)"
-            v-if="tool.checkAuth($route.name,'create_sales')" :disabled="scope.data.status == '结束' || new Date().valueOf() > new Date(scope.data.enddate).valueOf()">创建提报</el-button>
-        </template>
-      </tableLayout>
-      <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
-        @pageChange="pageChange" style="margin-top:16px;display:flex;justify-content: flex-end;">
-      </pagination>
-    </div>
-    <div class="container normal-panel" style="margin-top:16px">
-      <p class="normal-title normal-margin">销售预测记录</p>
-      <div class="header-handle">
-        <Search @searchActive="searchActive2" @clearData="clearData2" />
-        <time-select @clearSelect="clearTime" @timeChange="timeChange" title="提报时间:"></time-select>
-      </div>
-      <tableLayout :layout="tablecols2" :data="historyList" :custom="true" height="30vh">
-        <template v-slot:customcol="scope">
-          <div v-if="scope.column.columnname == 'periodtype'">
-            <span>
-              {{scope.column.data.periodpoint | timer(scope.column.data[scope.column.columnname])}}
-            </span>
-          </div>
-          <div v-else-if="scope.column.columnname == 'baseonproject'">
-            <span v-if="scope.column.data[scope.column.columnname] == '1'">按项目及产品类别预测</span>
-            <span v-else>按产品类别预测</span>
-          </div>
-          <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
-        </template>
-        <template v-slot:opreation="scope">
-          <el-button type="text" size="small" @click="goDetail(scope.data)"
-            v-if="tool.checkAuth($route.name,'read') && scope.data.isoverdue == 1">详情</el-button>
-          <el-button type="text" size="small" @click="goEdit(scope.data)"
-            v-else-if="tool.checkAuth($route.name,'update') && scope.data.isoverdue == 0">编辑</el-button>
-        </template>
-      </tableLayout>
-    </div>
-
-  </div>
-</template>
-
-<script>
-import Header from '@/SManagement/archives_upload/components/Header'
-import Search from '@/components/search/index'
-import DownSelect from '@/components/down_select/index'
-import TimeSelect from '@/SManagement/submitedit_one/components/TimeSelect'
-import Pagination from '@/components/pagination/Pagination'
-import { log } from '@antv/g2plot/lib/utils'
-export default {
-  name: '',
-  data () {
-    return {
-      params: {
-        "id": 20220906154403,
-        "version": 1,
-        "content": {
-          "nocache": true,
-          "pageNumber": 1,
-          "pageSize": 12,
-          "where": {
-            "condition": "",
-            "baseonproject": "",
-            "begindate": '',
-            "enddate": ''
-          }
-        }
-      },
-      /* 销售模板list */
-      salesPanelList: '',
-      /* 当前选中的模板id */
-      selectPanelId: '',
-      /* 提报记录数据 */
-      historyList: [],
-      tablecols: '',
-      tablecols2: '',
-      total: 0,
-      /* 开始时间 */
-      begindate: '',
-      /* 结束时间 */
-      enddate: '',
-      condition:''
-    };
-  },
-  components: { Header, Search, DownSelect, TimeSelect, Pagination },
-  computed: {
-  },
-  watch: {
-  },
-  filters: {
-    timer (val, type) {
-      if (type == '月') {
-        return '每月' + val.substr(1, val.length - 2) + '日'
-      } else {
-        return '每周' + val.substr(1, val.length - 2)
-      }
-    }
-  },
-  created () {
-    this.getSalesPanel()
-    this.tablecols = this.tool.tabelCol(this.$route.name).SalesPanelTable.tablecols
-    this.tablecols2 = this.tool.tabelCol(this.$route.name).salesHistoryTable.tablecols
-  },
-  methods: {
-    /* 获取销售预测模板 */
-    async getSalesPanel () {
-      let res = await this.$api.requested(this.params)
-      this.salesPanelList = res.data
-      this.total = res.total
-      this.historyList = []
-      console.log(res);
-    },
-    /* 获取提报记录数据 */
-    async getSalesDetail () {
-      let res = await this.$api.requested({
-        "id": 20220908134403,
-        "version": 1,
-        "content": {
-          "nocache": true,
-          "sa_salesforecastmodelid": this.selectPanelId,
-          "where": {
-            "begindate": this.begindate,
-            "enddate": this.enddate,
-            "condition":this.condition
-          }
-        }
-      })
-      this.historyList = res.data
-      console.log(this.historyList);
-    },
-    async rowClick (data) {
-      this.selectPanelId = data.sa_salesforecastmodelid
-      this.getSalesDetail()
-
-    },
-    /* 创建提报 */
-    async addBuill (data) {
-      if(data.data.status == '结束') return 
-      let res = await this.$api.requested({
-        "id": 20220913154403,
-        "version": 1,
-        "content": {
-          "sa_salesforecastmodelid": data.data.sa_salesforecastmodelid,
-          "sa_salesforecastbillid": 0,
-          "sa_projectids": data.data.baseonproject == 1 ? [] : [0]
-        }
-      })
-      if (res.code == 0) {
-        this.$notify({
-          title: '提示',
-          message: res.msg,
-          type: 'warning'
-        })
-      } else {
-        console.log(res);
-        this.$router.push({ path: data.data.baseonproject == 1 ? '/edit_sales' : '/edit_product', query: { id: res.data[0].sa_salesforecastbillid, id2: data.data.sa_salesforecastmodelid, header: 'panel' } })
-      }
-    },
-    /* 前往详情页 */
-    goDetail (data) {
-      if (data.baseonproject == 0) {
-        this.$router.push({ path: '/product_detail', query: { id: data.sa_salesforecastbillid } })
-      } else {
-        this.$router.push({ path: '/project_detail', query: { id: data.sa_salesforecastbillid, type: 'product' } })
-      }
-    },
-    /* 前往编辑页 */
-    goEdit (data) {
-      /* 跳转到产品编辑页 */
-      if (data.baseonproject == 0) {
-        this.$router.push({ path: '/edit_product', query: { id: data.sa_salesforecastbillid, id2: data.sa_salesforecastmodelid } })
-        /* 跳转到项目编辑页 */
-      } else {
-        this.$router.push({ path: '/edit_sales', query: { id: data.sa_salesforecastbillid, id2: data.sa_salesforecastmodelid, type: 'project' } })
-      }
-    },
-    pageChange (n) {
-      this.params.content.pageNumber = n
-      this.getSalesPanel()
-    },
-    /* 模板搜索 */
-    searchActive (data) {
-      this.params.content.where.condition = data
-      this.params.content.pageNumber = 1
-      this.getSalesPanel()
-    },
-    /* 模板清除搜索 */
-    clearData () {
-      this.params.content.where.condition = ''
-      this.params.content.pageNumber = 1
-      this.getSalesPanel()
-    },
-    /* 提报搜索 */
-    searchActive2 (data) {
-      this.condition = data
-      this.params.content.pageNumber = 1
-      this.getSalesDetail()
-    },
-    /* 提报清除搜索 */
-    clearData2 () {
-      this.condition = ''
-      this.params.content.pageNumber = 1
-      this.getSalesDetail()
-    },
-    /* 清除分类 */
-    clearCategory () {
-      this.params.content.where.baseonproject = ''
-      this.params.content.pageNumber = 1
-      this.getSalesPanel()
-    },
-    /* 分类改变 */
-    categoryChange (data) {
-      console.log(222);
-      this.params.content.where.baseonproject = data
-      this.params.content.pageNumber = 1
-      this.getSalesPanel()
-    },
-    /* 时间赛选改变 */
-    timeChange (time) {
-      this.begindate = time[0]
-      this.enddate = time[1]
-      this.getSalesDetail()
-    },
-    /* 清除时间赛选 */
-    clearTime () {
-      this.begindate = ''
-      this.enddate = ''
-      this.getSalesDetail()
-    },
-  },
-};
-</script>
-
-<style scoped>
-.sales .header-handle {
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-}
-</style>

src/SManagement/sales_forecast/index.vue

@@ -1,48 +1,267 @@
-
 <template>
-  <div>
-    <basicLayout 
-      ref="basicLayout" 
-      :oldFormPath="{
-        add:'HManagement/salesForecastTemplate/modules'
-      }"
-      tableName="SalesPanelTable" 
-      idName="sa_salesforecastmodelid" 
-      :apiId="{query:20220906154403}"
-      :options="options"
-      :detailPath="{
-        path:'/salesForecastDetail'
-      }">
-      <div slot="custom"></div>
-      <template v-slot:tbList="scope">
-        <div>
-          {{scope.data.column.data[[scope.data.column.columnname]]}}
-        </div>
-      </template>
-    </basicLayout>
+  <div class="sales">
+    <div class="container normal-panel">
+      <p class="normal-title normal-margin">预测提报任务</p>
+      <div class="header-handle">
+        <Search @searchActive="searchActive" @clearData="clearData" />
+        <DownSelect @selectChange="categoryChange" @clearCategory="clearCategory" title="提报要求:"
+          :list="[{label:'按产品类别预测',value:'0'},{label:'按项目及产品类别预测',value:'1'}]" style="margin-right:16px" />
+      </div>
+      <tableLayout v-if="salesPanelList" :layout="tablecols" :data="salesPanelList" :custom="true" height="30vh"
+        @rowClick="rowClick" fixedName="operation">
+        <template v-slot:customcol="scope">
+          <div v-if="scope.column.columnname == 'periodtype'">
+            <span>
+              {{scope.column.data.periodpoint | timer(scope.column.data[scope.column.columnname])}}
+            </span>
+          </div>
+          <div v-else-if="scope.column.columnname == 'baseonproject'">
+            <span v-if="scope.column.data[scope.column.columnname] == '1'">按项目及产品类别预测</span>
+            <span v-else>按产品类别预测</span>
+          </div>
+          <div v-else-if="scope.column.columnname == 'date'">
+            <span>{{scope.column.data.begdate}}至{{scope.column.data.enddate}}</span>
+          </div>
+          <div v-else-if="scope.column.columnname == 'status'">
+            <span :style="scope.column.data[scope.column.columnname] == '发布' ? 'color: rgb(82, 196, 26)' : ''">{{scope.column.data[scope.column.columnname]}}</span>
+          </div>
+          <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
+        </template>
+        <template v-slot:opreation="scope">
+          <el-button type="text" size="small" @click="addBuill(scope)"
+            v-if="tool.checkAuth($route.name,'create_sales')" :disabled="scope.data.status == '结束' || new Date().valueOf() > new Date(scope.data.enddate).valueOf()">创建提报</el-button>
+        </template>
+      </tableLayout>
+      <pagination :total="total" :pageSize="params.content.pageSize" :currentPage="params.content.pageNumber"
+        @pageChange="pageChange" style="margin-top:16px;display:flex;justify-content: flex-end;">
+      </pagination>
+    </div>
+    <div class="container normal-panel" style="margin-top:16px">
+      <p class="normal-title normal-margin">销售预测记录</p>
+      <div class="header-handle">
+        <Search @searchActive="searchActive2" @clearData="clearData2" />
+        <time-select @clearSelect="clearTime" @timeChange="timeChange" title="提报时间:"></time-select>
+      </div>
+      <tableLayout :layout="tablecols2" :data="historyList" :custom="true" height="30vh">
+        <template v-slot:customcol="scope">
+          <div v-if="scope.column.columnname == 'periodtype'">
+            <span>
+              {{scope.column.data.periodpoint | timer(scope.column.data[scope.column.columnname])}}
+            </span>
+          </div>
+          <div v-else-if="scope.column.columnname == 'baseonproject'">
+            <span v-if="scope.column.data[scope.column.columnname] == '1'">按项目及产品类别预测</span>
+            <span v-else>按产品类别预测</span>
+          </div>
+          <span v-else>{{scope.column.data[scope.column.columnname]}}</span>
+        </template>
+        <template v-slot:opreation="scope">
+          <el-button type="text" size="small" @click="goDetail(scope.data)"
+            v-if="tool.checkAuth($route.name,'read') && scope.data.isoverdue == 1">详情</el-button>
+          <el-button type="text" size="small" @click="goEdit(scope.data)"
+            v-else-if="tool.checkAuth($route.name,'update') && scope.data.isoverdue == 0">编辑</el-button>
+        </template>
+      </tableLayout>
+    </div>
+
   </div>
 </template>
 
 <script>
-/**
- * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
- * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
- * @param {string} tableName 开发端配置的表格名称
- * @param {String} idName 数据主id名称
- * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
- * @param {Array} options:{label:描述,value:值} 
- */
+import Header from '@/SManagement/archives_upload/components/Header'
+import Search from '@/components/search/index'
+import DownSelect from '@/components/down_select/index'
+import TimeSelect from '@/SManagement/submitedit_one/components/TimeSelect'
+import Pagination from '@/components/pagination/Pagination'
+import { log } from '@antv/g2plot/lib/utils'
 export default {
+  name: '',
   data () {
     return {
-      options:[]
-      
+      params: {
+        "id": 20220906154403,
+        "version": 1,
+        "content": {
+          "nocache": true,
+          "pageNumber": 1,
+          "pageSize": 12,
+          "where": {
+            "condition": "",
+            "baseonproject": "",
+            "begindate": '',
+            "enddate": ''
+          }
+        }
+      },
+      /* 销售模板list */
+      salesPanelList: '',
+      /* 当前选中的模板id */
+      selectPanelId: '',
+      /* 提报记录数据 */
+      historyList: [],
+      tablecols: '',
+      tablecols2: '',
+      total: 0,
+      /* 开始时间 */
+      begindate: '',
+      /* 结束时间 */
+      enddate: '',
+      condition:''
+    };
+  },
+  components: { Header, Search, DownSelect, TimeSelect, Pagination },
+  computed: {
+  },
+  watch: {
+  },
+  filters: {
+    timer (val, type) {
+      if (type == '月') {
+        return '每月' + val.substr(1, val.length - 2) + '日'
+      } else {
+        return '每周' + val.substr(1, val.length - 2)
+      }
     }
   },
-  methods:{
-  }
-}
+  created () {
+    this.getSalesPanel()
+    this.tablecols = this.tool.tabelCol(this.$route.name).SalesPanelTable.tablecols
+    this.tablecols2 = this.tool.tabelCol(this.$route.name).salesHistoryTable.tablecols
+  },
+  methods: {
+    /* 获取销售预测模板 */
+    async getSalesPanel () {
+      let res = await this.$api.requested(this.params)
+      this.salesPanelList = res.data
+      this.total = res.total
+      this.historyList = []
+      console.log(res);
+    },
+    /* 获取提报记录数据 */
+    async getSalesDetail () {
+      let res = await this.$api.requested({
+        "id": 20220908134403,
+        "version": 1,
+        "content": {
+          "nocache": true,
+          "sa_salesforecastmodelid": this.selectPanelId,
+          "where": {
+            "begindate": this.begindate,
+            "enddate": this.enddate,
+            "condition":this.condition
+          }
+        }
+      })
+      this.historyList = res.data
+      console.log(this.historyList);
+    },
+    async rowClick (data) {
+      this.selectPanelId = data.sa_salesforecastmodelid
+      this.getSalesDetail()
 
+    },
+    /* 创建提报 */
+    async addBuill (data) {
+      if(data.data.status == '结束') return 
+      let res = await this.$api.requested({
+        "id": 20220913154403,
+        "version": 1,
+        "content": {
+          "sa_salesforecastmodelid": data.data.sa_salesforecastmodelid,
+          "sa_salesforecastbillid": 0,
+          "sa_projectids": data.data.baseonproject == 1 ? [] : [0]
+        }
+      })
+      if (res.code == 0) {
+        this.$notify({
+          title: '提示',
+          message: res.msg,
+          type: 'warning'
+        })
+      } else {
+        console.log(res);
+        this.$router.push({ path: data.data.baseonproject == 1 ? '/edit_sales' : '/edit_product', query: { id: res.data[0].sa_salesforecastbillid, id2: data.data.sa_salesforecastmodelid, header: 'panel' } })
+      }
+    },
+    /* 前往详情页 */
+    goDetail (data) {
+      if (data.baseonproject == 0) {
+        this.$router.push({ path: '/product_detail', query: { id: data.sa_salesforecastbillid } })
+      } else {
+        this.$router.push({ path: '/project_detail', query: { id: data.sa_salesforecastbillid, type: 'product' } })
+      }
+    },
+    /* 前往编辑页 */
+    goEdit (data) {
+      /* 跳转到产品编辑页 */
+      if (data.baseonproject == 0) {
+        this.$router.push({ path: '/edit_product', query: { id: data.sa_salesforecastbillid, id2: data.sa_salesforecastmodelid } })
+        /* 跳转到项目编辑页 */
+      } else {
+        this.$router.push({ path: '/edit_sales', query: { id: data.sa_salesforecastbillid, id2: data.sa_salesforecastmodelid, type: 'project' } })
+      }
+    },
+    pageChange (n) {
+      this.params.content.pageNumber = n
+      this.getSalesPanel()
+    },
+    /* 模板搜索 */
+    searchActive (data) {
+      this.params.content.where.condition = data
+      this.params.content.pageNumber = 1
+      this.getSalesPanel()
+    },
+    /* 模板清除搜索 */
+    clearData () {
+      this.params.content.where.condition = ''
+      this.params.content.pageNumber = 1
+      this.getSalesPanel()
+    },
+    /* 提报搜索 */
+    searchActive2 (data) {
+      this.condition = data
+      this.params.content.pageNumber = 1
+      this.getSalesDetail()
+    },
+    /* 提报清除搜索 */
+    clearData2 () {
+      this.condition = ''
+      this.params.content.pageNumber = 1
+      this.getSalesDetail()
+    },
+    /* 清除分类 */
+    clearCategory () {
+      this.params.content.where.baseonproject = ''
+      this.params.content.pageNumber = 1
+      this.getSalesPanel()
+    },
+    /* 分类改变 */
+    categoryChange (data) {
+      console.log(222);
+      this.params.content.where.baseonproject = data
+      this.params.content.pageNumber = 1
+      this.getSalesPanel()
+    },
+    /* 时间赛选改变 */
+    timeChange (time) {
+      this.begindate = time[0]
+      this.enddate = time[1]
+      this.getSalesDetail()
+    },
+    /* 清除时间赛选 */
+    clearTime () {
+      this.begindate = ''
+      this.enddate = ''
+      this.getSalesDetail()
+    },
+  },
+};
 </script>
-<style>
-</style>
+
+<style scoped>
+.sales .header-handle {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+}
+</style>

src/SManagement/sales_forecast/index1.vue

@@ -0,0 +1,48 @@
+
+<template>
+  <div>
+    <basicLayout 
+      ref="basicLayout" 
+      :oldFormPath="{
+        add:'HManagement/salesForecastTemplate/modules'
+      }"
+      tableName="SalesPanelTable" 
+      idName="sa_salesforecastmodelid" 
+      :apiId="{query:20220906154403}"
+      :options="options"
+      :detailPath="{
+        path:'/sales_forecastDetail'
+      }">
+      <div slot="custom"></div>
+      <template v-slot:tbList="scope">
+        <div>
+          {{scope.data.column.data[[scope.data.column.columnname]]}}
+        </div>
+      </template>
+    </basicLayout>
+  </div>
+</template>
+
+<script>
+/**
+ * @basicLayout 提供this.$ref['basicLayout'].listData()方法查询列表信息
+ * @param {string} formPath 新建,编辑组件所在文件夹名称,以后所有列表新增修改文件统一放入Form文件夹下面,并创建与开发应用相同的名称的子文件夹
+ * @param {string} tableName 开发端配置的表格名称
+ * @param {String} idName 数据主id名称
+ * @param {object} apiId:{query:查询的接口id,del:删除的接口id} 
+ * @param {Array} options:{label:描述,value:值} 
+ */
+export default {
+  data () {
+    return {
+      options:[]
+      
+    }
+  },
+  methods:{
+  }
+}
+
+</script>
+<style>
+</style>

src/components/newLayout/modules/aside.vue

@@ -69,6 +69,11 @@ export default {
   mounted () {
     this.systemList = JSON.parse(sessionStorage.getItem('module_info'))
     this.$store.dispatch('setAppMenu')
+  },
+  watch:{
+    $route (val) {
+     
+    }
   }
 }
 
@@ -76,6 +81,8 @@ export default {
 <style>
 .aside__panel {
   margin: 0 10px 0 0;
+  font-weight: bold;
+  transition: linear .3s;
 }
 .aside__panel .el-menu-item{
   height: 40px;
@@ -101,6 +108,7 @@ export default {
   background-color: rgba(255 ,255,255,1) !important;
   border-radius: 0 40px 40px 0;
   color:#333 !important;
+  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
 }
 .logo{
   display:flex;

src/components/newLayout/modules/header.vue

@@ -114,6 +114,11 @@ export default {
     this.getWeather()
     this.accountInfo = JSON.parse(sessionStorage.getItem('active_account'))
   },
+  watch:{
+    $route (val) {
+      console.log(val)
+    }
+  }
 }
 
 </script>

src/components/newLayout/modules/menu.vue

@@ -1,23 +1,32 @@
 <template>
   <div class="menu_panel">
-    <el-menu router :default-active="activeIndex" active-text-color="#3874f6" text-color="#333" class="el-menu-demo shadow" mode="horizontal">
-      <el-submenu v-show="hasMoreApp(mod)" v-for="(mod,index) in modules" :key="mod.index" :index="String(index)">
-        <template slot="title"><b>{{mod.systemmodulename}}</b></template>
-        <el-menu-item :index="app.path" v-for="(app) in mod.apps" :key="app.index" @click="setActiveModules(mod,app)">{{app.meta.title}}</el-menu-item>
-      </el-submenu>
-      <el-menu-item v-show="!hasMoreApp(mod)" :index="mod.path" v-for="mod in modules" :key="mod.index" @click="setActiveModules(mod,mod.apps[0])"><b>{{mod.systemmodulename}}</b></el-menu-item>
-    </el-menu>
+    <div  v-if="show">
+      <el-menu router v-if="show"  :default-active="activeIndex" active-text-color="#3874f6" text-color="#333" class="el-menu-demo shadow" mode="horizontal" @select="handleSelect">
+        <el-submenu v-show="hasMoreApp(mod)" v-for="(mod,index) in modules" :key="index" :index="String(index)">
+          <template slot="title"><b>{{mod.systemmodulename}}</b></template>
+          <el-menu-item :index="app.path" v-for="(app) in mod.apps" :key="app.index" @click="setActiveModules(mod,app)">{{app.meta.title}}</el-menu-item>
+        </el-submenu>
+        <el-menu-item v-show="!hasMoreApp(mod)" :index="mod.path" v-for="(mod) in modules" :key="mod.index" @click="setActiveModules(mod,mod.apps[0])"><b>{{mod.systemmodulename}}</b></el-menu-item>
+      </el-menu>
+    </div>
   </div>
 </template>
 
 <script>
+import {mapGetters} from 'vuex'
 export default {
   data () {
     return {
-      activeIndex:'0',
-      modules:[]
+      activeIndex:'2',
+      modules:[],
+      show:true
     }
   },
+  computed:{
+    ...mapGetters({
+      acitveApp:'acitveApp'
+    })
+  },
   methods:{
     setModules (mod,type) {
       this.modules = mod
@@ -26,6 +35,7 @@ export default {
         let inactivePath = mod[0].apps[0].path
         this.$router.replace({path:inactivePath})
       }
+      
     },
     hasMoreApp (mod) {
       if (mod.apps.length > 1) {
@@ -42,16 +52,24 @@ export default {
     setDefaultData (mod) {
       let system = JSON.parse(sessionStorage.getItem('module_info'))
       this.setModules(system[0].modules)
+    },
+    handleSelect(key, keyPath) {
+      this.activeIndex = key
     }
   },
   mounted () {
     this.setDefaultData()
   },
-  // watch:{
-  //   $route (val) {
-  //     this.activeIndex = val.path
-  //   }
-  // }
+  watch:{
+    acitveApp (val) {
+      console.log(val)
+      this.show = false
+      setTimeout(() => {
+        this.show = true
+        this.activeIndex = val.path
+      }, 0);   
+    }
+  }
 }
 
 </script>
@@ -67,5 +85,9 @@ export default {
 }
 .menu_panel{
   padding: 0;
+  height:58px;
+  width: 100%;
+  background: #fff;
+  border-radius: 10px;
 }
 </style>

src/components/normal-basic-layout/details/index.vue

@@ -35,8 +35,8 @@
           <slot name="custom"></slot>
         </el-col>
         <el-col :span="5">
-          <group class="normal-margin" style="margin-top:38px" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)"></group>
-          <follow-up :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)"></follow-up>
+          <group ref="group" class="normal-margin" style="margin-top:38px" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)" @onSuccess="onSuccess"></group>
+          <follow-up ref="follow" :ownertable="ownertable?ownertable:idname.slice(0, this.idname.length - 2)"></follow-up>
         </el-col>
         
       </el-row>

src/components/normal-basic-layout/details/modules/followUp/followUp.vue

@@ -6,7 +6,7 @@
     </div>
     <div  class="container">
       <div v-if="logList.length === 0">
-        <el-empty description="暂无记录"></el-empty>
+        <el-empty description="暂无记录" :image-size="40"></el-empty>
       </div>
       <div>
         <el-timeline>

src/components/normal-basic-layout/details/modules/group/group.vue

@@ -3,10 +3,17 @@
   <div  v-for="item in list" :key="item.index" class="normal-panel">
     <div class="flex-align-center" style="border-bottom:1px solid #f1f2f3;padding:0 10px">
       <p style="flex:1;padding:10px 0;color:#999">负责人</p>
-      <accountDialog style="margin-left:10px" :ownertable="ownertable" @onSuccess="queryGroup"></accountDialog>
+      <!-- <accountDialog style="margin-left:10px" :ownertable="ownertable" @onSuccess="queryGroup"></accountDialog> -->
+      <el-popover
+        placement="right"
+        trigger="click"
+        width="300">
+        <member :param="param" :radio="true" @onSelect="onSubmit"></member>
+        <el-button type="text" size="small" slot="reference" @click="(addType = 'leader')">变更</el-button>
+      </el-popover>
     </div>
     <div style="padding:10px">
-      <div class="flex-align-center" v-if="men.isleader === 1" v-for="men in item.team" :key="men.index">
+      <div class="flex-align-center" v-if="men.isleader === 1" v-for="men in item.teamleader" :key="men.index">
         <div class="avatar inline-16" :class="men.isleader === 1?'leader':''" >
           <img class="avatar__image" v-if="men.headpic" :src="men.headpic" alt="">
           <p v-else>{{men.name.substr(0, 1)}}</p>
@@ -17,10 +24,19 @@
         </div>
         <p>{{men.name}}</p>
       </div>
+      <div v-if="item.teamleader.length === 0">
+        <el-empty description="暂无负责人" :image-size="40"></el-empty>
+      </div>
     </div>
     <div class="flex-align-center" style="border-bottom:1px solid #f1f2f3;padding:0 10px">
       <p style="flex:1;padding:10px 0;color:#999">参与者</p>
-      <accountDialog style="margin-left:10px"  :ownertable="ownertable" @onSuccess="queryGroup"></accountDialog>
+      <el-popover
+        placement="right"
+        trigger="click"
+        width="300">
+        <member :param="param" :radio="false" @onSelect="onSubmit"></member>
+        <el-button type="text" size="small" slot="reference"  @click="(addType = 'menber')">变更</el-button>
+      </el-popover>
     </div>
     <div style="padding:10px">
       <div class="flex-align-center" style="margin-bottom:16px" v-if="men.isleader === 0" v-for="men in item.team" :key="men.index">
@@ -34,6 +50,9 @@
         </div>
         <p><span>{{men.name}}</span><br><small style="color:#999">{{men.position}}</small></p>
       </div>
+      <div v-if="item.team.length === 0">
+        <el-empty description="暂无成员" :image-size="40"></el-empty>
+      </div>
     </div>
   </div>
 </div>
@@ -42,14 +61,36 @@
 <script>
 // import tableLayout
 import accountDialog from './select_account.vue'
+import member from '@/template/menber/index.vue'
 export default {
   props:['ownertable'],
   components:{
-    accountDialog
+    accountDialog,
+    member
   },
   data () {
     return {
-      list:[]
+      list:[
+        {
+          ismyteam:1,
+          team:[],
+          teamleader:[],
+          teamname:''
+        }
+      ],
+      param:{
+        id:'20221018122201',
+        content: {
+          "ownertable":this.ownertable,
+          "ownerid":this.$route.query.id,
+          "pageSize":20,
+          "where":{
+            "condition":"",
+            "withoutselect":1
+          }
+        }
+      },
+      addType:''
     }
   },
   methods:{
@@ -61,8 +102,15 @@ export default {
           "ownerid":this.$route.query.id
         }
       })
-      this.list = res.data
-      console.log(res.data,'----')
+      res.data.length > 0?this.list = res.data:this. list=[
+        {
+          ismyteam:1,
+          team:[],
+          teamleader:[],
+          teamname:''
+        }
+      ]
+      
     },
     async setLeader (item) {
       const res = await this.$api.requested({
@@ -70,7 +118,7 @@ export default {
         "content": {
           "ownertable":this.ownertable,
           "ownerid":this.$route.query.id,
-          "userid":item.userid
+          "userid":item[0].userid
         }
       })
       this.tool.showMessage(res,()=>{
@@ -89,7 +137,27 @@ export default {
       this.tool.showMessage(res,()=>{
         this.queryGroup()
       })
-    }
+    },
+    async onSubmit (data) {
+      const res = await this.$api.requested({
+        "id": 20220930103601,
+        "content": {
+            "ownertable":this.ownertable,
+            "ownerid":this.$route.query.id,
+            "userids":data.map(e=>{
+              return e.userid
+            })
+        }
+      })
+      if (this.addType === 'leader') {
+        this.setLeader(data)
+      } else {
+        this.tool.showMessage(res,()=>{
+          this.queryGroup()
+          this.visiable = false
+        })
+      }
+    },
   },
   mounted() {
     this.queryGroup()

src/components/normal-basic-layout/details/modules/group/select_account.vue

@@ -71,6 +71,7 @@ export default {
       dialogTableVisible:false,
       params:{
         id:'20221018122201',
+        "pageSize":20,
         content: {
           "ownertable":this.ownertable,
           "ownerid":this.$route.query.id,
@@ -112,20 +113,7 @@ export default {
       console.log(val)
       this.selection = val
     },
-    async onSubmit (row) {
-      const res = await this.$api.requested({
-        "id": 20220930103601,
-        "content": {
-            "ownertable":this.ownertable,
-            "ownerid":this.$route.query.id,
-            "userids":[row.userid]
-        }
-      })
-      this.tool.showMessage(res,()=>{
-        this.dialogTableVisible = false
-        this.$emit('onSuccess')
-      })
-    },
+    
   },
   created () {
     //获取表结构

src/template/menber/index.vue

@@ -0,0 +1,137 @@
+<template>
+<div> 
+	<el-input class="normal-margin" v-model="search" @keyup.native.enter="listData" suffix-icon="el-icon-search" size="small" placeholder="输入成员名称"></el-input>
+	<div class="flex-align-stretch menber__panel">
+		<div class="flex-align-center menber__item flex-between" :class="showSelelctIcon(item)?'active_menber__item':''" style="flex:1 0 auto" v-for="item in tableData" :key="item.index" @click="clickMenber(item)">
+			<div  class="flex-align-center">
+				<div class="avatar inline-16">
+					<img class="avatar__image" v-if="item.headpic" :src="item.headpic" alt="">
+					<p v-else>{{item.name.substr(0, 1)}}</p>
+				</div>
+				<div>
+					<p>{{ item.name }} &nbsp;<small style="color:#999999ad">{{item.username}}</small></p>
+					<small style="color:#999999ad;margin-top:10px">部门：{{ item.depname?item.depname:"未知部门" }}&emsp;职位：{{ item.position?item.position:"未知部门" }}</small>
+				</div>
+			</div>
+			<i class="el-icon-check iconCheck" v-if="showSelelctIcon(item)"></i>
+		</div>
+	</div>
+	<el-button size="mini" type="primary" style="margin-top:16px;float:right" @click="onSelect">确 定</el-button>
+ 	<div style="margin-top:16px;text-align:left">
+    <el-pagination
+    background
+    small
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+    :current-page="currentPage"
+    :page-size="param.content.pageSize"
+    layout="total, prev, pager, next"
+    :total="total">
+    </el-pagination>
+</div>
+</div>
+</template>
+
+<script>
+export default {
+	props:['param','radio'],
+  data () {
+    return {
+      search:'',
+      tableData: [],
+      total:0,
+      currentPage:0,
+			selected:[]
+    }
+  },
+  components:{
+  },
+  methods:{
+    async listData () {
+			this.param.content.where.condition = this.search
+      const res = await this.$api.requested(this.param)
+      this.tableData = res.data
+      this.total = res.total
+      this.currentPage = res.pageNumber
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.param.content.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.param.content.pageNumber = val
+      this.listData()
+    },
+		clickMenber (item) {
+			if (this.radio) {
+				this.selected = []
+			}
+			let _isSame = this.selected.some(m=>item.userid === m.userid)
+			if (!_isSame) {
+				this.selected.push(item)
+			} else {
+				this.selected = this.selected.filter(e=>{
+					return e.userid !== item.userid
+				})
+			}
+		},
+		showSelelctIcon (item) {
+			let _isSame = this.selected.some(m=>item.userid === m.userid)
+			return _isSame
+		},
+		onSelect () {
+			this.$emit('onSelect',this.selected)
+		}
+  },
+  mounted () {
+    this.listData()
+  }
+}
+
+</script>
+<style>
+</style>
+<style scoped>
+.menber__item{
+	width: calc(100% - 20px);
+	padding:5px 10px;
+	border-radius: 5px;
+	cursor: pointer;
+	color:#666;
+	margin-bottom: 5px;
+	transition: .2s linear;
+}
+.menber__item:hover{
+	background: #b5e4ff6e;
+}
+.active_menber__item{
+	background: #b5e4ff6e;
+}
+.menber__panel {
+	max-height: 300px;
+	overflow-y:scroll ;
+}
+.avatar{
+  position: relative;
+  height:30px;
+  width: 30px;
+  border-radius: 100%;
+  text-align: center;
+  line-height: 30px;
+  color:#fff;
+  font-weight: 500;
+  background: #3874F6;
+  cursor: pointer;
+  overflow: hidden;
+}
+.avatar__image{
+  height: 100%;
+  width: 100%;
+}
+.iconCheck{
+	font-weight: bold;
+	color:#3874F6
+}
+</style>

src/template/product/index.vue

@@ -0,0 +1,162 @@
+<template>
+<div class="container"> 
+  <div class="flex-align-center flex-between normal-margin">
+    <slot name="operation"></slot>
+    <div class="flex-align-center">
+      <el-input size="small"  suffix-icon="el-icon-search" v-model="params.content.where.condition" placeholder="产品名称,编号" @keyup.enter.native="listData(params.content.pageNumber = 1)" @clear="listData(params.content.pageNumber = 1)" clearable></el-input>&nbsp;
+    </div>
+  </div>
+  <div class="produtMag-panel">
+    <el-table
+      ref="multipleTable"
+      :data="tableData"
+      style="width: 100%"
+      :header-cell-style="{height:'50px',color:'#768093',fontWeight:'100'}"
+      :cell-style="{height:'50px',color:'#768093',fontWeight:'200'}"
+      @selection-change="selectionChange">
+      <el-table-column
+        type="selection"
+        width="55">
+      </el-table-column>
+      <el-table-column
+        align="center"
+        label="产品图"
+        width="80">
+        <template slot-scope="scope">
+          <div v-if="scope.row.attinfos[0]">
+            <previewImage class="image" :image="scope.row.attinfos[0]" :list="scope.row.attinfos" :deletebtn="false"></previewImage>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="itemname"
+        label="产品名称"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="itemno"
+        label="产品编号"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        label="型号/规格">
+        <template slot-scope="scope">
+          <p><span>{{scope.row.model}}</span>&nbsp;/&nbsp;<span>{{scope.row.spec}}</span></p>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="unitid"
+        label="起订量/增量"
+        width="150">
+        <template slot-scope="scope">
+          <p><span>{{scope.row.orderminqty}}</span>&nbsp;/&nbsp;<span>{{scope.row.orderaddqty}}</span></p>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="unitid"
+        label="计量单位"
+        width="90">
+        <template slot-scope="scope">
+          <el-tag size="mini" type="info" effect="plain">{{scope.row.unitname}}/{{scope.row.axunitname}}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="状态"
+        width="90">
+        <template slot-scope="scope">
+          <span :style="scope.row.status === '新建'?{color:'#52C41A'}:{color:'red'}">{{scope.row.status}}</span>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top:16px;text-align:right">
+      <el-pagination
+        background
+        small
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-size="params.content.pageSize"
+        layout="total, prev, pager, next, jumper"
+        :total="total">
+      </el-pagination>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import uploadFile from '@/components/upload/hw_obs_upload'
+import previewImage from '@/components/previewImage/index'
+
+export default {
+  data () {
+    return {
+      params:{
+        "id": 20220923140602,
+        "content": {
+          "pageNumber": 1,
+          "pageSize": 20,
+          "where": {
+            "condition": ''
+          }
+        }
+      },
+      tableSelectData:[],
+      tableData: [],
+      total:0,
+      currentPage:0
+    }
+  },
+  components:{
+    uploadFile,
+    previewImage
+  },
+  methods:{
+    async listData () {
+      const res = await this.$api.requested(this.params)
+      this.tableData = res.data
+      this.total = res.total
+      this.currentPage = res.pageNumber
+    },
+    handleSizeChange(val) {
+      // console.log(`每页 ${val} 条`);
+      this.params.content.pageSize = val
+      this.listData()
+    },
+    handleCurrentChange(val) {
+      // console.log(`当前页: ${val}`);
+      this.params.content.pageNumber = val
+      this.listData()
+    },
+    selectionChange (val) {
+      this.tableSelectData = val
+      this.$emit('selectionChange',val)
+    },
+    clearSelection () {
+      this.$refs.multipleTable.clearSelection();
+    }
+  },
+  mounted () {
+    this.listData()
+  }
+}
+
+</script>
+<style>
+</style>
+<style scoped>
+.produtMag-panel{
+  /* margin: 30px; */
+  padding:0 10px 10px 10px;
+  background: #fff;
+  border-radius:5px;
+  overflow: hidden;
+  border:1px solid rgb(0 0 0 / 5%)
+  /* box-shadow: 0 5px 5px rgb(0 0 0 / 10%);
+  transform: translate3d(0,-2px,0); */
+}
+.image {
+  width:40px;height:40px;margin:0px auto;
+}
+</style>