| | |
| | | <template> |
| | | <div class="container"> |
| | | <el-radio-group v-model="radio" size="large" style="margin-top:20px;color: white;"> |
| | | <!-- <el-radio :value="3">å
å
¥å
åº </el-radio> --> |
| | | <el-radio :value="6">å
è¿ååº</el-radio> |
| | | <el-radio :value="9">é¶æå
åº </el-radio> |
| | | <el-radio :value="12">æ´ä»¶å
åº </el-radio> |
| | | </el-radio-group> |
| | | </div> |
| | | <div class="button" style="text-align: right; margin-top: 50px; margin-right: 300px;"> |
| | | <el-button type="primary" size="large" @click="handleConfirm">ç¡®å®</el-button> |
| | | </div> |
| | | |
| | | <!-- |
| | | *Authorï¼jxx |
| | | *Contactï¼283591387@qq.com |
| | | *代ç ç±æ¡æ¶çæ,任使´æ¹é½å¯è½å¯¼è´è¢«ä»£ç çæå¨è¦ç |
| | | *ä¸å¡è¯·å¨@/extension/basic/tactics.jsæ¤å¤ç¼å |
| | | --> |
| | | <template> |
| | | <view-grid ref="grid" |
| | | :columns="columns" |
| | | :detail="detail" |
| | | :editFormFields="editFormFields" |
| | | :editFormOptions="editFormOptions" |
| | | :searchFormFields="searchFormFields" |
| | | :searchFormOptions="searchFormOptions" |
| | | :table="table" |
| | | :extend="extend"> |
| | | </view-grid> |
| | | </template> |
| | | <script> |
| | | import extend from "@/extension/basic/tactics.js"; |
| | | import { ref, defineComponent } from "vue"; |
| | | export default defineComponent({ |
| | | setup() { |
| | | const table = ref({ |
| | | key: 'id', |
| | | footer: "Foots", |
| | | cnName: 'åºå
¥åºçç¥', |
| | | name: 'Tactics', |
| | | url: "/Tactics/", |
| | | sortName: "id" |
| | | }); |
| | | |
| | | const editFormFields = ref({ |
| | | tacticeName: "", |
| | | selectTactice: "" |
| | | }); |
| | | |
| | | |
| | | <script setup> |
| | | import { ref } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | const radio = ref(4) |
| | | const handleConfirm = () => { |
| | | ElMessage.success('忢æå') |
| | | } |
| | | </script> |
| | | |
| | | <style scoped> |
| | | /* å¤å±å®¹å¨ï¼å
¨å±å±
ä¸ */ |
| | | .container { |
| | | margin-top: 100px; |
| | | display: flex; |
| | | flex-direction: column; /* åç´æå */ |
| | | justify-content: center; /* åç´å±
ä¸ */ |
| | | align-items: center; /* æ°´å¹³å±
ä¸ */ |
| | | /* background-color: #50a375; */ |
| | | font-size: 24px; /* æ´ä½æ¾å¤§ */ |
| | | } |
| | | |
| | | /* æ 颿 ·å¼ */ |
| | | .title { |
| | | font-size: 32px; |
| | | font-weight: bold; |
| | | margin-bottom: 40px; /* åæé®ç»ä¿æé´è· */ |
| | | } |
| | | |
| | | |
| | | |
| | | /* æé®ç»å
é¨ï¼è®©æ¯ä¸ªé项纵åæå */ |
| | | .el-radio-group { |
| | | display: flex; |
| | | flex-direction: column; /* åç´æå */ |
| | | gap: 20px; /* æ¯ä¸ªåéæé®çé´è· */ |
| | | } |
| | | |
| | | ::v-deep(.el-radio) { |
| | | transform: scale(1.5); /* æ´ä½æ¾å¤§ */ |
| | | margin: 10px 0; /* æ¯ä¸ªåéä¹é´å é´è· */ |
| | | } |
| | | |
| | | ::v-deep(.el-radio__label) { |
| | | font-size: 30px; /* æ¾å¤§æå */ |
| | | } |
| | | </style> |
| | | const editFormOptions = ref([ |
| | | [ |
| | | { |
| | | title: "çç¥åç§°", |
| | | field: "tacticeName", |
| | | type: "string", |
| | | required: true, |
| | | width: 150 |
| | | }, |
| | | { |
| | | title: "éæ©çç¥", |
| | | field: "selectTactice", |
| | | type: "select", |
| | | dataKey: "TacticsEnum", |
| | | data: [], |
| | | required: true, |
| | | width: 120 |
| | | } |
| | | ] |
| | | ]); |
| | | |
| | | const searchFormFields = ref({ |
| | | tacticeName: "", |
| | | selectTactice: "" |
| | | }); |
| | | |
| | | const searchFormOptions = ref([ |
| | | [ |
| | | { title: "çç¥åç§°", field: "TacticeName", type: "like" }, |
| | | { |
| | | title: "çç¥ç±»å", |
| | | field: "selectTactice", |
| | | type: "select", |
| | | dataKey: "TacticsEnum", |
| | | data: [], |
| | | } |
| | | ] |
| | | ]); |
| | | |
| | | const columns = ref([ |
| | | { |
| | | field: 'id', |
| | | title: '主é®', |
| | | type: 'int', |
| | | width: 90, |
| | | hidden: true, |
| | | readonly: true, |
| | | require: true, |
| | | align: 'left' |
| | | }, |
| | | { |
| | | field: 'tacticeName', |
| | | title: 'çç¥åç§°', |
| | | type: 'string', |
| | | width: 150, |
| | | require: true, |
| | | align: 'left', |
| | | sort: true |
| | | }, |
| | | |
| | | { |
| | | field: 'selectTactice', |
| | | title: 'éæ©çç¥', |
| | | type: 'string', |
| | | width: 120, |
| | | require: true, |
| | | align: 'left', |
| | | bind: { key: "TacticsEnum", data: [] } |
| | | }, |
| | | |
| | | { |
| | | field: 'creater', |
| | | title: 'å建人', |
| | | type: 'string', |
| | | width: 90, |
| | | align: 'left' |
| | | }, |
| | | { |
| | | field: 'createDate', |
| | | title: 'å建æ¶é´', |
| | | type: 'datetime', |
| | | width: 160, |
| | | align: 'left', |
| | | sort: true |
| | | }, |
| | | { |
| | | field: 'modifier', |
| | | title: 'ä¿®æ¹äºº', |
| | | type: 'string', |
| | | width: 100, |
| | | align: 'left' |
| | | }, |
| | | { |
| | | field: 'modifyDate', |
| | | title: 'ä¿®æ¹æ¶é´', |
| | | type: 'datetime', |
| | | width: 160, |
| | | align: 'left', |
| | | sort: true |
| | | } |
| | | ]); |
| | | |
| | | const detail = ref({ |
| | | cnName: "#detailCnName", |
| | | table: "#detailTable", |
| | | columns: [], |
| | | sortName: "", |
| | | key: "" |
| | | }); |
| | | |
| | | return { |
| | | table, |
| | | extend, |
| | | editFormFields, |
| | | editFormOptions, |
| | | searchFormFields, |
| | | searchFormOptions, |
| | | columns, |
| | | detail, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |