refac: defineComponent => vue3 setup

hwe/ts/processing/General/che_장비매매.vue

@@ -4,18 +4,16 @@
   <div class="bg0">
     <div>
       장비를 구입하거나 매각합니다.
-      <br>
+      <br />
-      현재 구입 불가능한 것은 <span style="color: red">붉은색</span>으로
+      현재 구입 불가능한 것은 <span style="color: red">붉은색</span>으로 표시됩니다.
-      표시됩니다.
+      <br />
-      <br>
+      현재 도시 치안 : {{ citySecu.toLocaleString() }} &nbsp;&nbsp;&nbsp;현재 자금 : {{ gold.toLocaleString() }}
-      현재 도시 치안 : {{ citySecu.toLocaleString() }} &nbsp;&nbsp;&nbsp;현재
+      <br />
-      자금 : {{ gold.toLocaleString() }}
-      <br>
     </div>
-    <div class="row">
+    <div v-if="selectedItemObj" class="row">
       <div class="col-8 col-md-4">
         장비:
-        <v-multiselect
+        <Multiselect
           v-model="selectedItemObj"
           class="selectedItemObj"
           :allow-empty="false"
@@ -41,11 +39,7 @@
               :style="{
                 color: props.option.notAvailable ? 'red' : undefined,
               }"
-              v-html="
+              v-html="`${props.option.html} ${props.option.notAvailable ? '(불가)' : ''}`"
-                `${props.option.html} ${
-                  props.option.notAvailable ? '(불가)' : ''
-                }`
-              "
             />
             <div
               v-else-if="props.option.simpleName"
@@ -61,7 +55,7 @@
             [{{ ItemTypeNameMap[props.option.type as keyof typeof ItemTypeNameMap] }}]
             {{ props.option.simpleName }}
           </template>
-        </v-multiselect>
+        </Multiselect>
       </div>
       <div class="col-4 col-md-2 d-grid">
         <b-button @click="submit">
@@ -69,7 +63,7 @@
         </b-button>
       </div>
     </div>
-    <div v-if="selectedItemObj.obj.id != NoneValue" class="row">
+    <div v-if="selectedItemObj && selectedItemObj.obj.id != NoneValue" class="row">
       <div class="col-4 col-md-2 align-self-center text-center">
         {{ selectedItemObj.obj.name }}
       </div>
@@ -81,26 +75,9 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref } from "vue";
+declare const staticValues: {
-import { unwrap } from "@/util/unwrap";
+  commandName: string;
-import { entriesWithType } from "@util/entriesWithType";
+};
-import type { Args } from "@/processing/args";
-import TopBackBar from "@/components/TopBackBar.vue";
-import BottomBar from "@/components/BottomBar.vue";
-import {
-  getProcSearchable,
-  type procItemList,
-  type procItemType,
-} from "../processingRes";
-import {
-  type ItemTypeKey,
-  ItemTypeNameMap,
-  NoneValue,
-  type ValuesOf,
-} from "@/defs";
-import { convertSearch초성 } from "@/util/convertSearch초성";
-
-declare const commandName: string;
 
 declare const procRes: {
   citySecu: number;
@@ -108,6 +85,20 @@ declare const procRes: {
   itemList: procItemList;
   ownItem: Record<ItemTypeKey, procItemType>;
 };
+</script>
+<script setup lang="ts">
+import { Multiselect } from "vue-multiselect";
+import { onMounted, reactive, ref, toRefs } from "vue";
+import { unwrap } from "@/util/unwrap";
+import { entriesWithType } from "@util/entriesWithType";
+import type { Args } from "@/processing/args";
+import TopBackBar from "@/components/TopBackBar.vue";
+import BottomBar from "@/components/BottomBar.vue";
+import { getProcSearchable, type procItemList, type procItemType } from "../processingRes";
+import { type ItemTypeKey, ItemTypeNameMap, NoneValue, type ValuesOf } from "@/defs";
+import { convertSearch초성 } from "@/util/convertSearch초성";
+
+const commandName = staticValues.commandName;
 
 type selectItemKey = {
   type: ItemTypeKey;
@@ -119,87 +110,79 @@ type selectItemKey = {
   obj: procItemType;
 };
 
-export default defineComponent({
+const forFind = ref<
-  components: {
+  {
-    TopBackBar,
+    category: ValuesOf<typeof ItemTypeNameMap> | "판매";
-    BottomBar,
+    values: selectItemKey[];
-  },
+  }[]
-  setup() {
+>([]);
-    const forFind: {
-      category: ValuesOf<typeof ItemTypeNameMap> | "판매";
-      values: selectItemKey[];
-    }[] = [];
 
-    //판매 처리
+//판매 처리
-    const forSell: typeof forFind[0] = {
+const forSell = ref<typeof forFind.value[0]>({
-      category: "소유 물품 판매",
+  category: "소유 물품 판매",
-      values: [],
+  values: [],
-    };
-    for (const [type, ownItem] of entriesWithType(procRes.ownItem)) {
-      const typeName = ItemTypeNameMap[type];
-      const itemNameHelp =
-        ownItem.id == NoneValue
-          ? ""
-          : ` [${ownItem.name}, ${(ownItem.cost / 2).toLocaleString()}금]`;
-      forSell.values.push({
-        type,
-        id: NoneValue,
-        html: `${typeName} 판매${itemNameHelp}`,
-        simpleName: `${ownItem.id == NoneValue ? typeName : ownItem.name} 판매`,
-        searchText: convertSearch초성(typeName).join("|"),
-        notAvailable: ownItem.id == NoneValue,
-        obj: ownItem,
-      });
-    }
-    forFind.push(forSell);
-
-    const selectedItemObj = ref<selectItemKey>(forSell.values[0]);
-
-    for (const [type, itemSubList] of entriesWithType(procRes.itemList)) {
-      const values: selectItemKey[] = [];
-      const forBuy: typeof forFind[0] = {
-        category: `${ItemTypeNameMap[type]} 구매`,
-        values,
-      };
-
-      for (const itemObj of itemSubList.values) {
-        values.push({
-          type,
-          id: itemObj.id,
-          html: `${
-            itemObj.name
-          } 구매 [${itemObj.cost.toLocaleString()}금, 필요 치안 ${itemObj.reqSecu.toLocaleString()}]`,
-          simpleName: `${itemObj.name} 구매`,
-          searchText: convertSearch초성(itemObj.name).join("|"),
-          notAvailable:
-            itemObj.reqSecu > procRes.citySecu || procRes.gold < itemObj.cost,
-          obj: itemObj,
-        });
-      }
-
-      forFind.push(forBuy);
-    }
-
-    async function submit(e: Event) {
-      const event = new CustomEvent<Args>("customSubmit", {
-        detail: {
-          itemType: selectedItemObj.value.type,
-          itemCode: selectedItemObj.value.id,
-        },
-      });
-      unwrap(e.target).dispatchEvent(event);
-    }
-
-    return {
-      ...procRes,
-      searchable: getProcSearchable(),
-      forFind,
-      NoneValue,
-      ItemTypeNameMap,
-      selectedItemObj,
-      commandName,
-      submit,
-    };
-  },
 });
+const selectedItemObj = ref<selectItemKey>();
+
+const self = reactive(procRes);
+const { citySecu, gold } = toRefs(self);
+
+onMounted(() => {
+  forFind.value = [];
+  forSell.value.values = [];
+  for (const [type, ownItem] of entriesWithType(procRes.ownItem)) {
+    const typeName = ItemTypeNameMap[type];
+    const itemNameHelp = ownItem.id == NoneValue ? "" : ` [${ownItem.name}, ${(ownItem.cost / 2).toLocaleString()}금]`;
+    forSell.value.values.push({
+      type,
+      id: NoneValue,
+      html: `${typeName} 판매${itemNameHelp}`,
+      simpleName: `${ownItem.id == NoneValue ? typeName : ownItem.name} 판매`,
+      searchText: convertSearch초성(typeName).join("|"),
+      notAvailable: ownItem.id == NoneValue,
+      obj: ownItem,
+    });
+  }
+  forFind.value.push(forSell.value);
+  selectedItemObj.value = forSell.value.values[0];
+
+  for (const [type, itemSubList] of entriesWithType(procRes.itemList)) {
+    const values: selectItemKey[] = [];
+    const forBuy: typeof forFind.value[0] = {
+      category: `${ItemTypeNameMap[type]} 구매`,
+      values,
+    };
+
+    for (const itemObj of itemSubList.values) {
+      values.push({
+        type,
+        id: itemObj.id,
+        html: `${
+          itemObj.name
+        } 구매 [${itemObj.cost.toLocaleString()}금, 필요 치안 ${itemObj.reqSecu.toLocaleString()}]`,
+        simpleName: `${itemObj.name} 구매`,
+        searchText: convertSearch초성(itemObj.name).join("|"),
+        notAvailable: itemObj.reqSecu > procRes.citySecu || procRes.gold < itemObj.cost,
+        obj: itemObj,
+      });
+    }
+
+    forFind.value.push(forBuy);
+  }
+});
+
+async function submit(e: Event) {
+  if(!selectedItemObj.value) return;
+
+  const event = new CustomEvent<Args>("customSubmit", {
+    detail: {
+      itemType: selectedItemObj.value.type,
+      itemCode: selectedItemObj.value.id,
+    },
+  });
+  unwrap(e.target).dispatchEvent(event);
+}
+
+const searchable = getProcSearchable();
+
 </script>