初步实现触发条件编辑

ArkMowers · Nov 9, 2023 · 73ce895 · 73ce895
1 parent 7d83090
commit 73ce895
Show file tree

Hide file tree

Showing 4 changed files with 175 additions and 7 deletions.
diff --git a/ui/components.d.ts b/ui/components.d.ts
@@ -66,5 +66,7 @@ declare module '@vue/runtime-core' {
     RouterView: typeof import('vue-router')['RouterView']
     ServerJang: typeof import('./src/components/ServerJang.vue')['default']
     SKLand: typeof import('./src/components/SKLand.vue')['default']
+    TriggerDialog: typeof import('./src/components/TriggerDialog.vue')['default']
+    TriggerEditor: typeof import('./src/components/TriggerEditor.vue')['default']
   }
 }
diff --git a/ui/src/components/TriggerDialog.vue b/ui/src/components/TriggerDialog.vue
@@ -0,0 +1,29 @@
+<script setup>
+const props = defineProps(['trigger'])
+
+import { inject } from 'vue'
+const show = inject('show_trigger_editor')
+
+import { storeToRefs } from 'pinia'
+import { usePlanStore } from '@/stores/plan'
+
+const plan_store = usePlanStore()
+const { sub_plan, backup_plans } = storeToRefs(plan_store)
+
+function update_trigger(data) {
+  console.log(data)
+  backup_plans.value[sub_plan.value].trigger = data
+}
+</script>
+
+<template>
+  <n-modal
+    v-model:show="show"
+    preset="card"
+    title="触发条件"
+    transform-origin="center"
+    style="width: 900px"
+  >
+    <trigger-editor :data="props.trigger" @update="update_trigger" />
+  </n-modal>
+</template>
diff --git a/ui/src/components/TriggerEditor.vue b/ui/src/components/TriggerEditor.vue
@@ -0,0 +1,100 @@
+<script setup>
+const props = defineProps(['data'])
+const emit = defineEmits(['update'])
+import { ref, watch } from 'vue'
+const left = ref(props.data.left)
+const operator = ref(props.data.operator)
+const right = ref(props.data.right)
+
+function generate() {
+  const result = { left: left.value, operator: operator.value, right: right.value }
+  emit('update', result)
+}
+
+watch([left, operator, right], () => {
+  console.log(left.value, operator.value, right.value)
+  generate()
+})
+
+const le_options = [
+  { label: '表达式', value: 'expression' },
+  { label: '字符串', value: 'string' }
+]
+</script>
+
+<template>
+  <table>
+    <tr>
+      <td>
+        <div class="label">
+          左
+          <n-select
+            :default-value="typeof left == 'object' ? 'expression' : 'string'"
+            :on-update:value="
+              (v) => {
+                left = v == 'string' ? '' : {}
+              }
+            "
+            :options="le_options"
+          />
+        </div>
+      </td>
+      <td>
+        <trigger-editor v-if="typeof left == 'object'" :data="left" @update="(d) => (left = d)" />
+        <n-input v-else v-model:value="left" />
+      </td>
+    </tr>
+    <tr>
+      <td>运算符</td>
+      <td>
+        <n-input v-model:value="operator" />
+      </td>
+    </tr>
+    <tr>
+      <td>
+        <div class="label">
+          右
+          <n-select
+            :default-value="typeof right == 'object' ? 'expression' : 'string'"
+            :on-update:value="
+              (v) => {
+                right = v == 'string' ? '' : {}
+              }
+            "
+            :options="le_options"
+          />
+        </div>
+      </td>
+
+      <td>
+        <trigger-editor
+          v-if="typeof right == 'object'"
+          :data="right"
+          @update="(d) => (right = d)"
+        />
+        <n-input v-else v-model:value="right" />
+      </td>
+    </tr>
+  </table>
+</template>
+
+<style scoped lang="scss">
+table {
+  width: 100%;
+
+  td {
+    width: 120px;
+  }
+
+  td:last-child {
+    width: auto;
+  }
+}
+
+.label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+}
+</style>
diff --git a/ui/src/pages/Plan.vue b/ui/src/pages/Plan.vue
@@ -22,7 +22,7 @@ const {
 } = storeToRefs(plan_store)
 const { load_plan } = plan_store
 
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, provide } from 'vue'
 const axios = inject('axios')
 
 import { file_dialog } from '@/utils/dialog'
@@ -116,9 +116,20 @@ const current_conf = computed(() => {
   }
   return backup_plans.value[sub_plan.value].conf
 })
+
+const show_trigger_editor = ref(false)
+provide('show_trigger_editor', show_trigger_editor)
+
+const trigger = computed(() => {
+  if (sub_plan.value == 'main') {
+    return {}
+  }
+  return backup_plans.value[sub_plan.value].trigger
+})
 </script>
 
 <template>
+  <trigger-dialog :trigger="trigger" />
   <div class="home-container plan-bar w-980 mx-auto mt-12">
     <n-input v-model:value="plan_file" />
     <n-button @click="open_plan_file">...</n-button>
@@ -129,8 +140,10 @@ const current_conf = computed(() => {
     <n-select v-model:value="sub_plan" :options="sub_plan_options" />
     <n-button @click="create_sub_plan">新建副表</n-button>
     <n-button :disabled="sub_plan == 'main'" @click="delete_sub_plan">删除此副表</n-button>
-    <n-button>编辑触发条件</n-button>
-    <n-button>编辑任务</n-button>
+    <n-button :disabled="sub_plan == 'main'" @click="show_trigger_editor = true"
+      >编辑触发条件</n-button
+    >
+    <n-button :disabled="sub_plan == 'main'">编辑任务</n-button>
   </div>
   <plan-editor ref="plan_editor" class="w-980 mx-auto" />
   <n-form
@@ -229,26 +242,50 @@ const current_conf = computed(() => {
       <template #label>
         <span>需要回满心情的干员</span><help-text><div>请查阅文档</div></help-text>
       </template>
-      <n-select multiple filterable tag :options="operators" v-model:value="current_conf.rest_in_full" />
+      <n-select
+        multiple
+        filterable
+        tag
+        :options="operators"
+        v-model:value="current_conf.rest_in_full"
+      />
     </n-form-item>
     <n-form-item>
       <template #label>
         <span>需要用尽心情的干员</span
         ><help-text><div>仅推荐写入具有暖机技能的干员</div></help-text>
       </template>
-      <n-select multiple filterable tag :options="operators" v-model:value="current_conf.exhaust_require" />
+      <n-select
+        multiple
+        filterable
+        tag
+        :options="operators"
+        v-model:value="current_conf.exhaust_require"
+      />
     </n-form-item>
     <n-form-item>
       <template #label>
         <span>0心情工作的干员</span><help-text><div>心情涣散状态任能触发技能的干员</div></help-text>
       </template>
-      <n-select multiple filterable tag :options="operators" v-model:value="current_conf.workaholic" />
+      <n-select
+        multiple
+        filterable
+        tag
+        :options="operators"
+        v-model:value="current_conf.workaholic"
+      />
     </n-form-item>
     <n-form-item>
       <template #label>
         <span>宿舍低优先级干员</span><help-text><div>请查阅文档</div></help-text>
       </template>
-      <n-select multiple filterable tag :options="operators" v-model:value="current_conf.resting_priority" />
+      <n-select
+        multiple
+        filterable
+        tag
+        :options="operators"
+        v-model:value="current_conf.resting_priority"
+      />
     </n-form-item>
     <n-form-item v-if="sub_plan != 'main'">
       <template #label>