refactor: define setup in script label

web/src/views/Contract.vue

@@ -170,7 +170,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
@@ -179,13 +179,6 @@ import { queryProductList } from "../api/product";
 import { queryCustomerOption } from "../api/customer";
 import { message, Modal } from 'ant-design-vue';
 
-export default {
-    components: {
-        SearchOutlined,
-        ExportOutlined
-    },
-    setup() {
-
 // 合同表格字段
 const columns = [{
     title: '合同编号',
@@ -642,45 +635,6 @@ export default {
     pagination.current = 1,
         pagination.total = undefined
 }
-
-        return {
-            columns,
-            productColumns,
-            productListColumns,
-            rules,
-            data,
-            onSelectedConteactIds,
-            onSelectedProductIds,
-            onSearch,
-            contract,
-            title,
-            visible,
-            disabled,
-            productListVisible,
-            operation,
-            onCreate,
-            onEdit,
-            contractFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            onCancelProductList,
-            getContractList,
-            keyWord,
-            onConfirm,
-            onAddProduct,
-            getCustomerOption,
-            changeCustomerOption,
-            calculatedAmount,
-            delProduct,
-            pagination,
-            onPagination,
-            onExport,
-            onContracts,
-            onPaginationProduct,
-        };
-    },
-}
 </script>
 
 <style scoped>

web/src/views/Customer.vue

@@ -160,7 +160,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined, MailTwoTone } from '@ant-design/icons-vue';
 import moment from 'moment'
@@ -168,13 +168,7 @@ import { createCustomer, updateCustomer, sendMailToCustomer, queryCustomerList,
 import { message, Modal } from 'ant-design-vue';
 import regionData from '../assets/region';
 
-export default {
+// 表格字段
-    components: {
-        SearchOutlined,
-        ExportOutlined,
-        MailTwoTone
-    },
-    setup() {
 const columns = [{
     title: '客户名称',
     dataIndex: 'name',
@@ -479,41 +473,6 @@ export default {
 const selectedOptions = (value) => {
     customer.region = value
 }
-
-        return {
-            data,
-            columns,
-            rules,
-            onSearch,
-            visible,
-            disabled,
-            onSelectChange,
-            onSearch,
-            customer,
-            title,
-            visible,
-            operation,
-            onCustomers,
-            onCreate,
-            onEdit,
-            customerFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            getCustomerList,
-            onExport,
-            keyWord,
-            options,
-            onPagination,
-            pagination,
-            selectedOptions,
-            mail,
-            visibleMail,
-            onMail,
-            onSend
-        };
-    },
-}
 </script>
 
 <style scoped>

web/src/views/Dashboard.vue

@@ -102,7 +102,7 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { QuestionCircleTwoTone } from '@ant-design/icons-vue'
 import * as echarts from "echarts";
 import { reactive, ref, onBeforeMount } from 'vue';
@@ -110,12 +110,6 @@ import { getSummary } from "../api/dashboard";
 import { getSubscribeInfo } from '../api/subscribe';
 import { useRouter } from 'vue-router'
 
-export default {
-    components: {
-        QuestionCircleTwoTone
-    },
-    setup() {
-
 const daysRange = ref(7);
 
 const router = useRouter()
@@ -222,15 +216,6 @@ export default {
         }
     })
 }
-
-        return {
-            data,
-            daysRange,
-            initChart,
-            subscribeInfo,
-        }
-    }
-}
 </script>
 
 <style scoped>

web/src/views/Error.vue

@@ -8,19 +8,12 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import router from '../router/index';
 
-export default {
-    setup() {
 const refresh = () => {
     router.push('/')
 }
-        return {
-            refresh
-        }
-    }
-}
 </script>
 
 <style scoped>

web/src/views/Home.vue

@@ -2,8 +2,8 @@
     <a-layout has-sider>
         <a-layout-sider class="layout-sider" width="150">
             <div class="logo">
-        <div><img src="../assets/logo.svg" style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" />
+                <div><img src="../assets/logo.svg"
-        </div>
+                        style="width: 32px;height: 32px;filter: drop-shadow(2px 2px 6px #79bbff);" /></div>
                 <div v-if="collapsed == false" class="title"><b>Z</b>O<b style="color: #1283FF;">C</b>RM</div>
             </div>
             <a-menu style="border-right: none;width: 149px;" v-model:selectedKeys="selectedKeys" mode="inline">
@@ -32,16 +32,20 @@
                                                         <BellFilled style="font-size: 18px;" />
                                                     </template>
                                                 </a-avatar>
-                        <a-avatar shape="square" style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
+                                                <a-avatar shape="square"
+                                                    style="color: #476FFF; background-color: #ccd6fa" :size="20" v-else>
                                                     <template #icon>
                                                         <BellFilled style="font-size: 18px;" />
                                                     </template>
                                                 </a-avatar>
-                        <div v-if="item.status == 1" style="color: #717171;">&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
+                                                <div v-if="item.status == 1" style="color: #717171;">
+                                                    &nbsp;&nbsp;&nbsp;{{ item.content }}</div>
                                                 <div v-else>&nbsp;&nbsp;&nbsp;{{ item.content }}</div>
                                             </div>
                                             <template #actions>
-                        <span v-if="item.status == 2" style="color: black;">{{ formatDate(item.created) }}</span>
+                                                <span v-if="item.status == 2" style="color: black;">{{
+                                                    formatDate(item.created)
+                                                }}</span>
                                                 <span v-else>{{ formatDate(item.created) }}</span>
                                             </template>
                                         </a-list-item>
@@ -49,8 +53,8 @@
                                 </a-list>
                             </div>
                             <div style="margin-top: 10px;display: flex;align-items: center;justify-content: center;">
-                <a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary" style="width: 92%;"
+                                <a-button v-if="data.noticeList.length != 0" @click="onDeleteNotice" type="primary"
-                  shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
+                                    style="width: 92%;" shape="round">清空全部 {{ data.noticeList.length }} 条通知</a-button>
                             </div>
                         </template>
                         <a-badge :count="data.noticeCount">
@@ -72,8 +76,8 @@
                     </a-dropdown>
                 </div>
                 <!-- 注销账号弹出框 -->
-        <a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消" okText="注销"
+                <a-modal v-model:visible="visible" title="注销账号" @ok="onConfirm" @cancel="onCancel" cancelText="取消"
-          width="400px" :centered="true">
+                    okText="注销" width="400px" :centered="true">
                     <a-alert message="账号注销后，会清空账号相关的所有数据。" type="warning" show-icon /><br />
                     <a-form :model="user" layout="vertical" @finish="onSubmit" :rules="rules">
                         <a-form-item name="email">
@@ -81,14 +85,14 @@
                         </a-form-item>
                         <a-form-item name="code">
                             <a-input v-model:value="user.code" style="width: 55%;" placeholder="验证码" />
-              <a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading" :disabled="disabled">
+                            <a-button @click="onGetCode" style="width: 40%;float: right;" :loading="loading"
+                                :disabled="disabled">
                                 {{ buttonText }}</a-button>
                         </a-form-item>
                     </a-form>
                 </a-modal>
             </a-layout-header>
-      <a-layout-content
+            <a-layout-content :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
-        :style="{ margin: '10px', background: '#fff', overflow: 'initial', borderRadius: '5px' }">
                 <transition name="fade">
                     <router-view v-slot="{ Component }">
                         <component :is="Component" />
@@ -99,7 +103,7 @@
     </a-layout>
 </template>
 
-<script>
+<script setup>
 import { reactive, ref, onBeforeMount } from 'vue';
 import { useRouter } from 'vue-router'
 import { useStore } from '../store/index';
@@ -110,50 +114,36 @@ import { DashboardOutlined, SmileOutlined, MehOutlined, ShoppingOutlined, Profil
 import { QuestionCircleFilled, BellFilled, ExclamationCircleOutlined, LogoutOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
 
-export default {
-  components: {
-    DashboardOutlined,
-    SmileOutlined,
-    MehOutlined,
-    ShoppingOutlined,
-    ProfileOutlined,
-    CrownOutlined,
-    QuestionCircleFilled,
-    BellFilled,
-    ExclamationCircleOutlined,
-    LogoutOutlined
-  },
-  setup() {
 // 菜单选项
 const menuItem = reactive([{
     key: "dashboard",
     to: "/dashboard",
-      icon: "dashboard-outlined",
+    icon: DashboardOutlined,
     name: "仪表盘"
 }, {
     key: "customer",
     to: "/customer",
-      icon: "smile-outlined",
+    icon: SmileOutlined,
     name: "客户"
 }, {
     key: "contract",
     to: "/contract",
-      icon: "meh-outlined",
+    icon: MehOutlined,
     name: "合同"
 }, {
     key: "product",
     to: "/product",
-      icon: "shopping-outlined",
+    icon: ShoppingOutlined,
     name: "产品"
 }, {
     key: "config",
     to: "/config",
-      icon: "profile-outlined",
+    icon: ProfileOutlined,
     name: "配置"
 }, {
     key: "subscribe",
     to: "/subscribe",
-      icon: "crown-outlined",
+    icon: CrownOutlined,
     name: "订阅"
 }])
 
@@ -327,34 +317,6 @@ export default {
     disabled.value = false
     modalFormRef.value.resetFields()
     visible.value = false
-    };
-
-    return {
-      menuItem,
-      rules,
-      selectedKeys,
-      collapsed,
-      user,
-      visible,
-      visibleLogo,
-      loading,
-      disabled,
-      buttonText,
-      onUserAvatar,
-      onLogout,
-      onGetCode,
-      onConfirm,
-      onNotice,
-      onReadNotice,
-      noticeCount,
-      onDeleteNotice,
-      onCancel,
-      store,
-      formatDate,
-      data,
-      toDocs
-    };
-  },
 }
 </script>
 

web/src/views/Index.vue

@@ -24,10 +24,8 @@
     </div>
 </template>
 
-<script>
+<script setup>
-export default {
 
-}
 </script>
 
 <style scoped>

web/src/views/Login.vue

@@ -31,7 +31,7 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { reactive } from 'vue';
 import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
 import { useRouter } from 'vue-router'
@@ -39,12 +39,6 @@ import { userLogin } from '../api/user';
 import { message } from 'ant-design-vue';
 import { initData } from '../api/common';
 
-export default {
-    components: {
-        UserOutlined,
-        LockOutlined,
-    },
-    setup() {
 const router = useRouter()
 
 // 用户登录
@@ -101,17 +95,6 @@ export default {
         }
     })
 }
-
-        return {
-            formData,
-            onLogin,
-            onLoginFailed,
-            forgotPass,
-            toRegister,
-            initSysData,
-        };
-    }
-};
 </script>
 
 <style scoped>

web/src/views/Pass.vue

@@ -22,14 +22,12 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { userForgotPass, getVerifyCode } from '../api/user'
 import { message } from 'ant-design-vue';
 
-export default {
-    setup() {
 const router = useRouter()
 
 // 重置密码
@@ -106,20 +104,6 @@ export default {
 const onLogin = () => {
     router.push("/login")
 }
-
-        return {
-            formData,
-            rules,
-            passFormRef,
-            loading,
-            disabled,
-            buttonText,
-            onSubmit,
-            onGetCode,
-            onLogin,
-        };
-    },
-}
 </script>
 
 <style scoped>

web/src/views/Product.vue

@@ -107,19 +107,13 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onMounted, createVNode } from 'vue';
 import { SearchOutlined, ExclamationCircleOutlined, ExportOutlined } from '@ant-design/icons-vue';
 import moment from 'moment'
 import { createProduct, updateProduct, queryProductList, deleteProduct, queryProductInfo, productExport } from '../api/product';
 import { message, Modal } from 'ant-design-vue';
 
-export default {
-    components: {
-        SearchOutlined,
-        ExportOutlined
-    },
-    setup() {
 // 表格字段
 const columns = [{
     title: '产品名称',
@@ -349,33 +343,6 @@ export default {
 const onCancel = () => {
     productFormRef.value.resetFields()
     visible.value = false
-        };
-
-        return {
-            columns,
-            rules,
-            data,
-            onSelectChange,
-            onSearch,
-            product,
-            title,
-            visible,
-            disabled,
-            operation,
-            onProducts,
-            onCreate,
-            onEdit,
-            productFormRef,
-            onSave,
-            onCancel,
-            onDelete,
-            getProductList,
-            onExport,
-            keyWord,
-            pagination,
-            onPagination,
-        };
-    },
 }
 </script>
 

web/src/views/Register.vue

@@ -22,14 +22,12 @@
     </a-form>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive } from 'vue';
 import { useRouter } from 'vue-router';
 import { userRegister, getVerifyCode } from '../api/user';
 import { message } from 'ant-design-vue';
 
-export default {
-    setup() {
 const router = useRouter()
 
 // 用户注册
@@ -114,20 +112,6 @@ export default {
 const onLogin = () => {
     router.push("/login")
 }
-
-        return {
-            formData,
-            rules,
-            registerFormRef,
-            loading,
-            disabled,
-            buttonText,
-            onRegister,
-            onLogin,
-            onGetCode,
-        };
-    },
-}
 </script>
 
 <style scoped>

web/src/views/Result.vue

@@ -8,13 +8,10 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { useRouter } from 'vue-router'
 import { useStore } from '../store/index';
 
-export default {
-    setup() {
-
 const router = useRouter()
 const store = useStore()
 
@@ -22,11 +19,6 @@ export default {
     store.selectedKeys = 'subscribe'
     router.push('/subscribe')
 }
-        return {
-            onBuy
-        }
-    }
-}
 </script>
 
 <style>

web/src/views/Subscribe.vue

@@ -25,7 +25,8 @@
                     <div class="content">能力不设限，新功能优先体验</div><br />
                     <a-button v-if="version == 1 || version == 3" type="primary" size="large" class="btn-buy"
                         @click="onPay(2)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{ expired
+                    <a-button v-if="version == 2" type="primary" size="large" class="btn-buy" shape="round">{{
+                        expired
                     }} 到期</a-button>
                     <br />
                     <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验30天']">
@@ -41,7 +42,8 @@
                     <div class="content">能力不设限，新功能优先体验</div><br />
                     <a-button v-if="version == 1 || version == 2" type="primary" size="large" class="btn-buy"
                         @click="onPay(3)" shape="round" :disabled="disabled">立即购买</a-button>
-                    <a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{ expired
+                    <a-button v-if="version == 3" type="primary" size="large" class="btn-buy" shape="round">{{
+                        expired
                     }} 到期</a-button>
                     <br />
                     <div class="subscribe-list" v-for="item in ['客户管理', '合同管理', '产品管理', '仪表盘可体验365天']">
@@ -54,19 +56,13 @@
     </div>
 </template>
 
-<script>
+<script setup>
 import { ref, reactive, onBeforeMount } from 'vue';
 import { CheckCircleFilled } from '@ant-design/icons-vue';
 import { subscribePay, getSubscribeInfo } from '../api/subscribe';
 import { useRouter } from 'vue-router'
 import moment from 'moment'
 
-export default {
-    components: {
-        CheckCircleFilled
-    },
-    setup() {
-
 const router = useRouter()
 
 const version = ref(0)
@@ -119,23 +115,6 @@ export default {
         }
     })
 }
-
-        return {
-            version,
-            expired,
-            onPay,
-            payUrl,
-            visible,
-            disabled,
-            payResult,
-            title,
-            activedClass,
-            buttonText,
-            isClick,
-            subscribeInfo,
-        }
-    }
-}
 </script>
 
 <style scoped>