资料管理优化

package.json

@@ -11,42 +11,46 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "ant-design-vue": "^1.7.2",
-    "@jeecg/antd-online-mini": "3.1.0-beta",
     "@antv/data-set": "^0.11.4",
-    "viser-vue": "^2.4.8",
+    "@jeecg/antd-online-mini": "3.1.0-beta",
+    "@tinymce/tinymce-vue": "2.1.0",
+    "@toast-ui/editor": "^2.1.2",
+    "ant-design-vue": "^1.7.2",
     "axios": "^0.18.0",
+    "china-area-data": "^5.0.1",
+    "clipboard": "^2.0.4",
+    "codemirror": "^5.46.0",
+    "cron-parser": "^2.10.0",
     "dayjs": "^1.8.0",
+    "dom-align": "1.12.0",
     "enquire.js": "^2.1.6",
     "js-cookie": "^2.2.0",
     "lodash.get": "^4.4.2",
     "lodash.pick": "^4.4.0",
     "md5": "^2.2.1",
     "nprogress": "^0.2.0",
+    "pdfjs-dist": "^2.5.207",
+    "qiankun": "^2.5.1",
+    "tinymce": "5.4.1",
+    "viser-vue": "^2.4.8",
     "vue": "^2.6.10",
+    "vue-area-linkage": "^5.1.0",
     "vue-cropper": "^0.5.4",
     "vue-i18n": "^8.7.0",
     "vue-loader": "^15.7.0",
     "vue-ls": "^3.2.0",
-    "vue-router": "^3.0.1",
-    "vuex": "^3.1.0",
-    "vue-print-nb-jeecg": "^1.0.9",
-    "clipboard": "^2.0.4",
+    "vue-pdf": "^4.3.0",
+    "vue-pdf-embed": "^1.1.4",
     "vue-photo-preview": "^1.1.3",
+    "vue-print-nb-jeecg": "^1.0.9",
+    "vue-router": "^3.0.1",
     "vue-splitpane": "^1.0.4",
+    "vue3-pdfjs": "^0.1.6",
     "vuedraggable": "^2.20.0",
-    "codemirror": "^5.46.0",
-    "@tinymce/tinymce-vue": "2.1.0",
-    "tinymce": "5.4.1",
-    "@toast-ui/editor": "^2.1.2",
-    "vue-area-linkage": "^5.1.0",
-    "china-area-data": "^5.0.1",
-    "dom-align": "1.12.0",
-    "xe-utils": "2.4.8",
+    "vuex": "^3.1.0",
     "vxe-table": "2.9.13",
     "vxe-table-plugin-antd": "1.8.10",
-    "cron-parser": "^2.10.0",
-    "qiankun": "^2.5.1"
+    "xe-utils": "2.4.8"
   },
   "devDependencies": {
     "@babel/polyfill": "^7.2.5",
@@ -55,13 +59,13 @@
     "@vue/cli-service": "^3.3.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "7.2.3",
+    "compression-webpack-plugin": "^3.1.0",
     "eslint": "^5.16.0",
     "eslint-plugin-vue": "^5.1.0",
+    "html-webpack-plugin": "^4.2.0",
     "less": "^3.9.0",
     "less-loader": "^4.1.0",
-    "vue-template-compiler": "^2.6.10",
-    "html-webpack-plugin": "^4.2.0",
-    "compression-webpack-plugin": "^3.1.0"
+    "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
     "root": true,

src/views/dataupload/DataMain.vue

@@ -8,7 +8,7 @@
             @goList="showList"   />
   <!-- 导入页 -->
   <TaskImport v-else-if="showType === 'import'"
-            @goList="showList" :userNo="userNo" />
+            @goList="showList" :infoId="infoId" />
 </template>
 
 <script>
@@ -42,7 +42,7 @@
       // 显示导入页面
       showImport(param) {
         this.showType = 'import'
-        this.userNo = param
+        this.infoId = param
       },
     }
   }

src/views/dataupload/modules/TaskImport.vue

@@ -47,18 +47,35 @@
         </a-col>
         <a-col :span="18">
           <a-card title="资料详情" :bordered="false">
-            <a-list item-layout="horizontal" :data-source="delList">
+            <a-list item-layout="vertical" :data-source="delList">
               <a-list-item slot="renderItem" slot-scope="item, index">
+<!--                <pdf
+                  ref="pdf"
+                  :src="item.url">
+                </pdf>-->
+
+
+
+
                 <a-list-item-meta
                   :description=item.information
                 >
-                  <a slot="title" :href= item.href >{{ item.title }}</a>
+                  <a slot="title" :href=item.href>{{ item.title }}</a>
+
                   <a-avatar
                     slot="avatar"
-                    :src=item.href
+                    :src=item.url
+                    icon="file"
                   />
-
                 </a-list-item-meta>
+                <iframe
+                  frameborder="1"
+                  :src=item.href
+                  ref="ifr"
+                  width="100%"
+                  height="560px"
+                  scrolling="auto">
+                </iframe>
               </a-list-item>
             </a-list>
           </a-card>
@@ -113,6 +130,7 @@
 
 import {JeecgListMixin} from '@/mixins/JeecgListMixin'
 import {httpAction} from '@api/manage'
+import pdf from 'vue-pdf';
 let Base64 = require('js-base64').Base64
 
 
@@ -120,13 +138,16 @@ export default {
   name: 'TaskImport',
   mixins: [JeecgListMixin],
   props: {
-    userNo: {
+    infoId: {
       //type: string,
       require: true
     }
   },
-  setup(){
+  setup() {
 
+  },
+  components:{
+    pdf
   },
   data() {
     return {
@@ -138,122 +159,53 @@ export default {
       autoSearch: false,
       dataSource: [],
       errorCount: 0,
-      // 表头
-      columns: [
-        {
-          title: '#',
-          dataIndex: '',
-          key: 'rowIndex',
-          width: 60,
-          align: "center",
-          customRender: function (t, r, index) {
-            return parseInt(index) + 1;
-          }
-        },
-        {
-          title: '客户编号',
-          align: "center",
-          dataIndex: 'customerNo'
-        },
-        {
-          title: '客户名称',
-          align: "center",
-          dataIndex: 'customerName'
-        },
-        {
-          title: '服务号码',
-          align: "center",
-          dataIndex: 'smsNumber'
-        },
-        {
-          title: '用户编号',
-          align: "center",
-          dataIndex: 'userNo'
-        },
-        {
-          title: '入网时间',
-          align: "center",
-          dataIndex: 'networkAccessTime'
-        },
-        {
-          title: '用户状态',
-          align: "center",
-          dataIndex: 'userState'
-        },
-        {
-          title: '用户发展员工',
-          align: "center",
-          dataIndex: 'staffInfo'
-        },
-        {
-          title: '员工姓名',
-          align: "center",
-          dataIndex: 'staffName'
-        },
-        {
-          title: '员工编号',
-          align: "center",
-          dataIndex: 'staffNo'
-        },
-        {
-          title: '用户发展二级部门',
-          align: "center",
-          dataIndex: 'staffDeptLevel2'
-        },
-        {
-          title: '用户发展三级部门',
-          align: "center",
-          dataIndex: 'staffDeptLevel3'
-        },
-
-      ],
       url: {
         importExcel: window._CONFIG['domainURL'] + "/smsCheck/task/importCustomerExcel",
         importData: "/smsCheck/task/importCustomerData",
         minioUpload: "/smsCheck/customerData/uploadMinio",
-        editUrl: "/smsCheck/customerData/edit/user/no",
-        list:"/smsCheck/customerData/list"
+        editUrl: "/smsCheck/customerData/edit/info/id",
+        list: "/smsCheck/customerData/list"
       },
       delList: [],
     }
   },
 
   created() {
-      this.customerDataList();
+    this.customerDataList();
   },
 
   methods: {
 
     customerDataList() {
-      let model  = {
-        "userNo" : this.userNo
+      let model = {
+        "infoId": this.infoId
       }
       httpAction(this.url.list, model, "post")
         .then((res) => {
           if (res.success) {
             let records = res.result.records;
-            if (records.length > 0){
+            if (records.length > 0) {
               this.delList = [];
               let record = records[0];
               let recordElement = record[this.value1];
-              if (recordElement != null || recordElement != undefined){
+              if (recordElement != null || recordElement != undefined) {
                 let splitList = recordElement.split(",");
-                for (var i in splitList){
+                for (var i in splitList) {
                   let splitListElement = splitList[i];
                   let split = splitListElement.split("/");
-                  let splitElement = split[split.length-1];
-
+                  let splitElement = split[split.length - 1];
                   let del = {
-                    title:splitElement,
-                    href:window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode((splitListElement))),
-                    information:"上传用户："+record.createBy + " 上传日期："+record.createTime,
+                    title: splitElement,
+                    href: window._CONFIG['onlinePreviewDomainURL'] + '?url=' + encodeURIComponent(Base64.encode((splitListElement))),
+                    information: "上传用户：" + record.createBy,
+                    url: splitListElement
                   }
                   this.delList.push(del)
                 }
-              }else {
+              } else {
                 this.delList = [];
               }
-            }else {
+            } else {
               this.delList = [];
             }
 
@@ -293,7 +245,7 @@ export default {
           let fileUrl = info.file.response.message;
           let value1 = this.value1;
           let model = {
-            "userNo": this.userNo,
+            "infoId": this.infoId,
             //value1:fileUrl
           }
           model[value1] = fileUrl
@@ -319,7 +271,6 @@ export default {
 
 
     fileTypeClick(a, event) {
-      console.log(this.value1)
       //console.log(a)
       //console.log(event)
       this.customerDataList();

src/views/dataupload/modules/TaskList.vue

@@ -7,15 +7,21 @@
         <a-row :gutter="24">
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
             <a-form-item label="客户编号">
-              <j-input placeholder="请输入客户编号" v-model="queryParam.taskName"></j-input>
+              <j-input placeholder="请输入客户编号" v-model="queryParam.customerNo"></j-input>
             </a-form-item>
           </a-col>
           <a-col :xl="6" :lg="7" :md="8" :sm="24">
-            <a-form-item label="任务状态">
-              <j-dict-select-tag placeholder="请选择任务状态" v-model="queryParam.taskState" dictCode="sms_check_task_state"/>
+            <a-form-item label="资料状态">
+              <j-dict-select-tag placeholder="请选择资料状态" v-model="queryParam.checkState"
+                                 dictCode="sms_check_check_state"/>
             </a-form-item>
           </a-col>
-
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+            </span>
+          </a-col>
         </a-row>
       </a-form>
     </div>
@@ -24,19 +30,25 @@
     <!-- 操作按钮区域 -->
     <div class="table-operator">
       <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
-      <a-button type="primary" icon="download" @click="handleExportXls('稽核任务')">导出</a-button>
+      <a-button type="primary" icon="download" @click="handleExportXls('资料文件')">导出</a-button>
       <a-dropdown v-if="selectedRowKeys.length > 0">
         <a-menu slot="overlay">
-          <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/>删除</a-menu-item>
+          <a-menu-item key="1" @click="batchDel">
+            <a-icon type="delete"/>
+            删除
+          </a-menu-item>
         </a-menu>
-        <a-button style="margin-left: 8px"> 批量操作 <a-icon type="down" /></a-button>
+        <a-button style="margin-left: 8px"> 批量操作
+          <a-icon type="down"/>
+        </a-button>
       </a-dropdown>
     </div>
 
     <!-- table区域-begin -->
     <div>
       <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
-        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
+        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
+        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
         <a style="margin-left: 24px" @click="onClearSelected">清空</a>
       </div>
 
@@ -59,7 +71,8 @@
         </template>
         <template slot="imgSlot" slot-scope="text,record">
           <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
-          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
+          <img v-else :src="getImgView(text)" :preview="record.id" height="25px" alt=""
+               style="max-width:80px;font-size: 12px;font-style: italic;"/>
         </template>
         <template slot="fileSlot" slot-scope="text">
           <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
@@ -75,14 +88,14 @@
         </template>
 
         <span slot="action" slot-scope="text, record">
+           <a v-if="loadSubData(record)" @click="handSubmit(record)">提交稽核</a>
+          <a-divider type="vertical"/>
            <a @click="handUpload(record)">资料上传</a>
-
-           <a-divider type="vertical" />
+           <a-divider type="vertical"/>
           <a @click="handleEdit(record)">编辑</a>
-
-          <a-divider type="vertical" />
+          <a-divider type="vertical"/>
           <a-dropdown>
-            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
+            <a class="ant-dropdown-link">更多 <a-icon type="down"/></a>
             <a-menu slot="overlay">
               <a-menu-item>
                 <a @click="handleDetail(record)">详情</a>
@@ -95,7 +108,9 @@
             </a-menu>
           </a-dropdown>
         </span>
-
+        <template v-slot:checkState="status">
+          <a-badge :status="status | statusTypeFilter" :text="status | statusFilter"/>
+        </template>
       </a-table>
     </div>
     <!-- 任务添加 -->
@@ -107,165 +122,252 @@
 
 <script>
 
-  import '@/assets/less/TableExpand.less'
-  import { mixinDevice } from '@/utils/mixin'
-  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
-  import SmsCheckTaskModal from './SmsCheckTaskModal'
-  import TaskAdd from './TaskAdd'
+import '@/assets/less/TableExpand.less'
+import {mixinDevice} from '@/utils/mixin'
+import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+import SmsCheckTaskModal from './SmsCheckTaskModal'
+import TaskAdd from './TaskAdd'
+import {httpAction} from "@api/manage";
 
-  export default {
-    name: 'TaskList',
-    mixins:[JeecgListMixin, mixinDevice],
-    components: {
-      SmsCheckTaskModal,
-      TaskAdd
-    },
-    data () {
-      return {
-        description: '稽核任务管理页面',
-        // 表头
-        columns: [
-          {
-            title: '#',
-            dataIndex: '',
-            key:'rowIndex',
-            width:60,
-            align:"center",
-            customRender:function (t,r,index) {
-              return parseInt(index)+1;
-            }
-          },
-          {
-            title:'客户编号',
-            align:"center",
-            dataIndex: 'customerNo'
-          },
-          {
-            title:'用户编号',
-            align:"center",
-            dataIndex: 'userNo'
-          },
-          {
-            title:'客户名称',
-            align:"center",
-            dataIndex: 'customerName'
-          },
-          {
-            title:'用户发展员工',
-            align:"center",
-            dataIndex: 'staffName'
-          },
-          {
-            title:'入网时间',
-            align:"center",
-            dataIndex: 'networkAccessTime'
-          },
-          {
-            title:'服务号码',
-            align:"center",
-            dataIndex: 'smsNumber'
-          },
-          {
-            title:'资料状态',
-            align:"center",
-            dataIndex: 'checkState',
-            customRender:function (t,r,index) {
-              let checkState = "无状态";
-              switch (t) {
-                case 0:
-                  checkState = "未处理";
-                  break;
-                case 1:
-                  checkState = "未完善";
-                  break;
-                case 2:
-                  checkState = "待稽核";
-                  break;
-                case 3:
-                  checkState = "待整改";
-                  break;
-                case 4:
-                  checkState = "已整改";
-                  break;
-                case 5:
-                  checkState = "稽核通过";
-                  break;
-              }
-              return checkState;
-            }
-          },
-          {
-            title: '操作',
-            dataIndex: 'action',
-            align:"center",
-            fixed:"right",
-            width:147,
-            scopedSlots: { customRender: 'action' }
+export default {
+  name: 'TaskList',
+  mixins: [JeecgListMixin, mixinDevice],
+  components: {
+    SmsCheckTaskModal,
+    TaskAdd
+  },
+  data() {
+    return {
+      description: '稽核任务管理页面',
+      // 表头
+      columns: [
+        {
+          title: '#',
+          dataIndex: '',
+          key: 'rowIndex',
+          width: 60,
+          align: "center",
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1;
           }
-        ],
-        url: {
-          list: "/smsCheck/customerInfo/staff/list",
-          delete: "/smsCheck/task/delete",
-          deleteBatch: "/smsCheck/task/deleteBatch",
-          exportXlsUrl: "/smsCheck/task/exportXls",
-          importExcelUrl: "smsCheck/task/importExcel",
+        },
+        {
+          title: '客户编号',
+          align: "center",
+          dataIndex: 'customerNo'
+        },
+        {
+          title: '用户编号',
+          align: "center",
+          dataIndex: 'userNo'
+        },
+        {
+          title: '客户名称',
+          align: "center",
+          dataIndex: 'customerName'
+        },
+        {
+          title: '用户发展员工',
+          align: "center",
+          dataIndex: 'staffName'
+        },
+        {
+          title: '入网时间',
+          align: "center",
+          dataIndex: 'networkAccessTime'
+        },
+        {
+          title: '服务号码',
+          align: "center",
+          dataIndex: 'smsNumber'
+        },
+        {
+          title: '资料状态',
+          align: "center",
+          sorter: true,
+          dataIndex: 'checkState',
+          scopedSlots: { customRender: 'checkState' }
+         /* customRender: function (t, r, index) {
+            let checkState = "无状态";
+            switch (t) {
+              case 0:
+                checkState = "未处理";
+                break;
+              case 1:
+                checkState = "未完善";
+                break;
+              case 2:
+                checkState = "待稽核";
+                break;
+              case 3:
+                checkState = "已整改";
+                break;
+              case 4:
+                checkState = "待整改";
+                break;
+              case 5:
+                checkState = "稽核通过";
+                break;
+            }
+            return checkState;
+            //return <span><Badge status=success ></span>;
 
+          }*/
         },
-        dictOptions:{},
-        superFieldList:[],
-      }
-    },
-    created() {
-      this.getSuperFieldList();
-    },
-    computed: {
-      importExcelUrl: function(){
-        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
-      },
-    },
-    methods: {
-      // 显示添加页面
-      showAdd() {
-        this.$emit('goAdd', true);
-      },
-      // 显示导入页面
-      showImport() {
-        this.$emit('goImport', true);
-      },
-      handUpload(record){
-        let userNo = record.userNo;
-        if (userNo == undefined || userNo == null){
-          this.$message.warning('用户编号不能为空！');
-          return;
+        {
+          title: '操作',
+          dataIndex: 'action',
+          align: "center",
+          fixed: "right",
+          width: 147,
+          scopedSlots: {customRender: 'action'}
         }
-        //console.log(record)
-        this.$emit('goImport', userNo);
+      ],
+      url: {
+        editCheck: "/smsCheck/customerInfo/edit/check/state",
+        list: "/smsCheck/customerInfo/staff/list",
+        delete: "/smsCheck/customerInfo/delete",
+        deleteBatch: "/smsCheck/customerInfo/deleteBatch",
+        exportXlsUrl: "/smsCheck/customerInfo/exportXls",
+        importExcelUrl: "/smsCheck/customerInfo/importExcel",
 
       },
+      dictOptions: {},
+      superFieldList: [],
+    }
+  },
+  created() {
+    this.getSuperFieldList();
+  },
+  filters: {
+    statusTypeFilter(type) {
+      const statusTypeMap = {
+        '0': 'error',
+        '1': 'error',
+        '2': 'warning',
+        '3': 'warning',
+        '4': 'processing',
+        '5': 'success'
+      }
+      return statusTypeMap[type]
+    },
+    statusFilter(status) {
+      const statusMap = {
+        '0': '未完善',
+        '1': '未完善',
+        '2': '待稽核',
+        '3': '待稽核',
+        '4': '待整改',
+        '5': '通过'
+      }
+      return statusMap[status]
+    }
+  },
+  computed: {
+    importExcelUrl: function () {
+      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
+    }
+    ,
+  }
+  ,
+  methods: {
 
+    loadSubData(record) {
+      let checkState = record.checkState;
+      let state = true;
+      switch (checkState) {
+        case 0:
+          state = true;
+          break;
+        case 1:
+          state = true;
+          break;
+        case 2:
+          state = true;
+          break;
+        case 3:
+          state = false;
+          break;
+        case 4:
+          state = true;
+          break;
+        case 5:
+          state = false;
+          break;
+      }
+      return state;
 
-      initDictConfig(){
-      },
-      getSuperFieldList(){
-        let fieldList=[];
-        fieldList.push({type:'string',value:'taskName',text:'任务名称',dictCode:''})
-        fieldList.push({type:'string',value:'taskState',text:'任务状态',dictCode:'sms_check_task_state'})
-        fieldList.push({type:'datetime',value:'taskStartTime',text:'任务开始时间'})
-        fieldList.push({type:'datetime',value:'taskEndTime',text:'任务结束时间'})
-        this.superFieldList = fieldList
-      },
-      // handleAdd: function () {
-      //   this.$refs.modalForm.add();
-      //   this.$refs.modalForm.title = "新增";
-      //   this.$refs.modalForm.disableSubmit = false;
-      // },
-      // handleEdit: function (record) {
-      //   this.$refs.modalForm.edit(record);
-      //   this.$refs.modalForm.title = "编辑";
-      //   this.$refs.modalForm.disableSubmit = false;
-      // },
     }
+    ,
+
+    // 显示添加页面
+    showAdd() {
+      this.$emit('goAdd', true);
+    }
+    ,
+    // 显示导入页面
+    showImport() {
+      this.$emit('goImport', true);
+    }
+    ,
+    handUpload(record) {
+      let infoId = record.id;
+      if (infoId == undefined || infoId == null) {
+        this.$message.warning('用户编号不能为空！');
+        return;
+      }
+      //console.log(record)
+      this.$emit('goImport', infoId);
+    }
+    ,
+
+    handSubmit(record) {
+      let nowIpagination = this.ipagination;
+      let model = {
+        "id": record.id,
+        //value1:fileUrl
+      }
+      httpAction(this.url.editCheck, model, "post")
+        .then((res) => {
+          if (res.success) {
+            this.$message.success(res.message)
+            this.loadData(nowIpagination.current);
+
+          } else {
+            this.$message.warning(res.message)
+          }
+        }).finally(() => {
+
+      })
+      //this.ipagination.current = 2;
+    }
+    ,
+    initDictConfig() {
+
+
+    }
+    ,
+    getSuperFieldList() {
+      let fieldList = [];
+      fieldList.push({type: 'string', value: 'customerNo', text: '任务名称', dictCode: ''})
+      fieldList.push({type: 'string', value: 'checkState', text: '任务状态', dictCode: 'sms_check_task_state'})
+      fieldList.push({type: 'datetime', value: 'taskStartTime', text: '任务开始时间'})
+      fieldList.push({type: 'datetime', value: 'taskEndTime', text: '任务结束时间'})
+      this.superFieldList = fieldList
+    }
+    ,
+    // handleAdd: function () {
+    //   this.$refs.modalForm.add();
+    //   this.$refs.modalForm.title = "新增";
+    //   this.$refs.modalForm.disableSubmit = false;
+    // },
+    // handleEdit: function (record) {
+    //   this.$refs.modalForm.edit(record);
+    //   this.$refs.modalForm.title = "编辑";
+    //   this.$refs.modalForm.disableSubmit = false;
+    // },
   }
+}
 </script>
 
 <style scoped>