feat

manifest.json

@@ -96,7 +96,7 @@
         "versionCode" : 100
     },
     "mp-weixin" : {
-        "appid" : "",
+        "appid" : "test",
         "setting" : {
             "urlCheck" : false
         },

pages/home/index.vue

@@ -1,64 +1,94 @@
 <template>
 	<view class="container">
 		<div style="display: flex;flex-direction: column;">
-			<!-- <div style="display: flex;justify-content: space-between;align-items: center;">
-				<text class="section-title">输入</text>
-				<el-button size="small" type="primary" @click="addTargetRow">添加</el-button>
-			</div> -->
+			<div style="display: flex;">
+				<el-button type="primary" style="width:100%;margin-bottom: 10px;" @click="switchRoles">
+					交换
+				</el-button>
+			
+				<el-button type="primary" style="width:100%;margin-bottom: 10px;"
+					@click="calculateBestMatch">
+					计算最佳配对
+				</el-button>
+			</div>
+			
+			
 			<el-table size="small" border :data="inputData" max-height="calc(100vh - 450px)" empty-text="暂无数据，请添加猫咪势力">
 				<el-table-column label="顺序" width="55px">
 					<template #="{ $index }">{{ $index + 1 }}</template>
 				</el-table-column>
 
-				<el-table-column label="目标角色">
+				<el-table-column label="目标">
 					<template #header>
 						<div style="display: flex;justify-content: space-between;">
-							目标角色
+							目标
 							<el-tooltip content="编辑" placement="top">
-								<el-button type="primary" link style="margin-left: 0px;" @click="editRow('母', '目标角色')">
+								<el-button type="primary" link style="margin-left: 0px;" @click="editRow('母', '目标')">
 									<uni-icons style="color: #409eff" size="14" type="compose" />
 								</el-button>
 							</el-tooltip>
 						</div>
 					</template>
 
-					<el-table-column label="公" min-width="60px" prop="targetMale" />
-					<el-table-column label="母" min-width="60px" prop="targetFemale" />
+					<el-table-column min-width="60px" prop="targetMale">
+						<template #header>
+							<div style="display: flex;justify-content: space-between;">
+								<span>公</span>
+								<span>{{ numStat.targetMale }}</span>
+							</div>
+						</template>
+					</el-table-column>
+					
+					<el-table-column min-width="60px" prop="targetFemale">
+						<template #header>
+							<div style="display: flex;justify-content: space-between;">
+								<span>母</span>
+								<span>{{ numStat.targetFemale }}</span>
+							</div>
+						</template>
+					</el-table-column>
+					
+					<!-- <el-table-column label="母" min-width="60px" prop="targetFemale" /> -->
 				</el-table-column>
 
-				<el-table-column label="备选角色">
+				<el-table-column label="备选">
 					<template #header>
 						<div style="display: flex;justify-content: space-between;">
-							备选角色
+							备选
 							<el-tooltip content="编辑" placement="top">
-								<el-button type="primary" link style="margin-left: 0px;" @click="editRow('公', '备选角色')">
+								<el-button type="primary" link style="margin-left: 0px;" @click="editRow('公', '备选')">
 									<uni-icons style="color: #409eff" size="14" type="compose" />
 								</el-button>
 							</el-tooltip>
 						</div>
 					</template>
 
-					<el-table-column label="公" min-width="60px" prop="backupMale" />
-					<el-table-column label="母" min-width="60px" prop="backupFemale" />
+					<el-table-column min-width="60px" prop="backupMale">
+						<template #header>
+							<div style="display: flex;justify-content: space-between;">
+								<span>公</span>
+								<span>{{ numStat.backupMale }}</span>
+							</div>
+						</template>
+					</el-table-column>
+					
+					<el-table-column min-width="60px" prop="backupFemale">
+						<template #header>
+							<div style="display: flex;justify-content: space-between;">
+								<span>母</span>
+								<span>{{ numStat.backupFemale }}</span>
+							</div>
+						</template>
+					</el-table-column>
 				</el-table-column>
 			</el-table>
 		</div>
 
-		<div style="display: flex;">
-			<el-button type="primary" style="width:100%;margin-bottom: 10px;margin-top:10px" @click="switchRoles">
-				交换角色
-			</el-button>
 
-			<el-button type="primary" style="width:100%;margin-bottom: 10px;margin-top:10px"
-				@click="calculateBestMatch">
-				计算最佳配对
-			</el-button>
-		</div>
 
 		<!-- 输出表格 -->
 		<view class="section" v-if="outputData.length > 0">
-
-			<div style="display: flex;justify-content: space-between;" >
+			<div style="display: flex;justify-content: space-between;margin-top:10px" >
 				<text class="section-title">输出， 计算时间 {{ time }} ms </text>
 				<span>差额: {{ powerDifference }}</span>
 			</div>
@@ -69,12 +99,12 @@
 				</el-table-column>
 
 
-				<el-table-column label="目标角色">
+				<el-table-column label="目标">
 					<el-table-column label="公" min-width="60px" prop="targetMale" />
 					<el-table-column label="母" min-width="60px" prop="targetFemale" />
 				</el-table-column>
 
-				<el-table-column label="备选角色">
+				<el-table-column label="备选">
 					<el-table-column label="公" min-width="60px" prop="backupMale" />
 					<el-table-column label="母" min-width="60px" prop="backupFemale" />
 				</el-table-column>
@@ -92,14 +122,27 @@
 				</div>
 
 
-				<span class="dialog-title">猫咪势力(公)</span>
-				<textarea v-model="malePowers" placeholder="用逗号隔开，如:200,10,100"
-					style="height: 70px;border: 1px solid #dfe2e5" />
-
-				<span class="dialog-title">猫咪势力(母)</span>
-				<textarea v-model="feMalePowers" placeholder="用逗号隔开，如:200,10,100"
-					style="height: 70px;border: 1px solid #dfe2e5" />
-
+				<div style="display: flex;justify-content: space-between; align-items: center;">
+					<span class="dialog-title">猫咪势力(公)</span>
+					<uni-icons type="close" size="18" @click="malePowers = ''"></uni-icons>
+				</div>
+				
+				<textarea 
+					v-model="malePowers" 
+					placeholder="用逗号或顿号隔开，如:200,10,100"
+					style="height: 70px;border: 1px solid #dfe2e5" 
+				/>
+
+				<div style="display: flex;justify-content: space-between; align-items: center;">
+					<span class="dialog-title">猫咪势力(母)</span>
+					<uni-icons type="close" size="18" @click="feMalePowers = ''"></uni-icons>
+				</div>
+				
+				<textarea 
+					v-model="feMalePowers" 
+					placeholder="用逗号或顿号隔开，如:200,10,100"
+					style="height: 70px;border: 1px solid #dfe2e5" 
+				/>
 
 				<button size='mini' type="primary" @click="handleConfirm">保存</button>
 			</div>
@@ -112,19 +155,40 @@
 import { ref, computed } from 'vue';
 import { ElMessage } from "element-plus"
 
+
+const time = ref("")
+const role = ref("")
+const type = ref('')
 const gender = ref("")
 const powers = ref("")
-const time = ref("")
-
 const malePowers = ref('')
 const feMalePowers = ref('')
-const role = ref("")
 
-const type = ref('')
 
-const mockData = [
 
-]
+const numStat = computed(() => {
+	const stat = {
+		targetMale: 0,
+		targetFemale: 0,
+		backupMale: 0,
+		backupFemale: 0
+	}
+	
+	inputData.value.forEach(item => {
+		stat.targetMale += item.targetMale ? 1 : 0
+		stat.targetFemale += item.targetFemale ? 1 : 0
+		stat.backupMale += item.backupMale ? 1 : 0
+		stat.backupFemale += item.backupFemale ? 1 : 0
+	})
+	
+	
+	console.log(stat)
+	return stat
+})
+
+
+
+const mockData = []
 
 const inputData = ref(mockData);
 const outputData = ref([]);
@@ -136,7 +200,7 @@ function editRow(_gender, _role) {
 	gender.value = _gender
 	role.value = _role
 	
-	const roleProp = role.value === '目标角色' ? 'target' : 'backup'
+	const roleProp = role.value === '目标' ? 'target' : 'backup'
 	malePowers.value = inputData.value.map(item => item[`${roleProp}Male`]).filter(item => !!item).join(',')
 	feMalePowers.value = inputData.value.map(item => item[`${roleProp}Female`]).filter(item => !!item).join(',')
 	batchRef.value.open()
@@ -145,7 +209,6 @@ function editRow(_gender, _role) {
 
 function switchRoles(){
 	outputData.value = []
-	// const cloneInputData = inputData.value.map(item => ({ ...item }))
 	const backups = inputData.value.map(item => ({ male: item.backupMale, female: item.backupFemale }))
 	const targets = inputData.value.map(item => ({ male: item.targetMale, female: item.targetFemale }))
 	
@@ -160,7 +223,7 @@ function switchRoles(){
 
 const powerDifference = ref(0)
 
-// 目标角色操作
+// 目标操作
 const addTargetRow = () => {
 	gender.value = ''
 	powers.value = ''
@@ -175,22 +238,14 @@ function isPositiveInteger(str) {
 
 function generatePowers(_powers, gender){
 	const keys = ['targetMale', 'targetFemale', 'backupMale', 'backupFemale']
-	
 	_powers = _powers.replace(/，|、|,/g, ',')
 	const powerSet = _powers.split(',').map(item => item.trim()).filter(item => item !== '')
-	
 	const isOk = powerSet.every(num => isPositiveInteger(num))
-
 	if (!isOk && powerSet.length !== 0) return false
 
-	
-	const roleProp = role.value === '目标角色' ? 'target' : 'backup'
+	const roleProp = role.value === '目标' ? 'target' : 'backup'
 	const genderProp = gender === '公' ? 'Male' : 'Female'
-
-
-	inputData.value.forEach((_, index) => {
-		inputData.value[index][`${roleProp}${genderProp}`] = null
-	})
+	inputData.value.forEach((_, index) => { inputData.value[index][`${roleProp}${genderProp}`] = null })
 
 	const prop = `${roleProp}${genderProp}`
 	const values = inputData.value.map(item => item[prop]).filter(value => value);
@@ -241,8 +296,6 @@ function generatePowers(_powers, gender){
 		
 		return true
 	})
-	
-	console.log(inputData.value)
 }
 
 
@@ -316,28 +369,28 @@ function calculateBestMatch() {
 	// const backupMale = [153, 91, 77];
 	// const backupFemale = [121, 118, 115]; 
 	if(targetFemale.length + targetFemale.length > 20){
-		ElMessage.warning('目标角色公数据与母数据的和不能超过20条')
+		ElMessage.warning('目标公数据与母数据的和不能超过20条')
 		return
 	}
 	
 	if(backupMale.length > 20){
-		ElMessage.warning('备选角色的公数据不能超过20条')
+		ElMessage.warning('备选的公数据不能超过20条')
 		return
 	}
 	
 	if(backupFemale.length > 20){
-		ElMessage.warning('备选角色的母数据不能超过20条')
+		ElMessage.warning('备选的母数据不能超过20条')
 		return
 	}
 	
 
 	if (targetFemale.length > backupMale.length && backupMale.length !== 0){
-		ElMessage.warning('备选角色的公数据长度必须大于或等于目标角色的母数据')
+		ElMessage.warning('备选的公数据长度必须大于或等于目标的母数据')
 		return
 	}
 
 	if (targetMale.length > backupFemale.length && backupFemale.length !== 0) {
-		ElMessage.warning('备选角色的母数据长度必须或等于大于目标角色的公数据')
+		ElMessage.warning('备选的母数据长度必须或等于大于目标的公数据')
 		return
 	}
 
@@ -497,7 +550,7 @@ textarea {
 }
 
 .container {
-    padding: 20px;
+    padding: 10px 20px;
 }
 
 .section {