新增进件管理

src/views/applyments/select_shop.vue

@@ -0,0 +1,71 @@
+<!-- 选择商户以及进件渠道 -->
+<template>
+  <div class="gyq_container">
+    <div class="gyq_content">
+      <div class="row">
+        <el-form :model="queryForm" inline>
+          <el-form-item label="请选择用户">
+            <el-input placeholder="用户号/名称/手机号" readonly @click="selectShopsDialogRef?.show()"
+              v-model="queryForm.shopName">
+              <template #suffix>
+                <div class="center">
+                  <el-icon v-if="queryForm.shopName" @click.stop="queryForm.shopName = ''">
+                    <CircleCloseFilled />
+                  </el-icon>
+                  <el-icon @click="selectShopsDialogRef?.show()" style="cursor: pointer;">
+                    <Search />
+                  </el-icon>
+                </div>
+              </template>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" icon="Plus">新增用户</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <selectShopsDialog ref="selectShopsDialogRef" @success="selectShopSuccess" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from "vue";
+import selectShopsDialog from "./components/selectShopsDialog.vue";
+
+const selectShopsDialogRef = ref<InstanceType<typeof selectShopsDialog> | null>(null);
+
+const queryForm = ref({
+  shopName: ""
+});
+
+// 选择商户成功回调
+function selectShopSuccess(shop: any) {
+  console.log('选择的商户：', shop);
+  queryForm.value.shopName = shop.shopName;
+}
+</script>
+
+<style scoped lang="scss">
+.gyq_container {
+  padding: 14px;
+
+  .gyq_content {
+    padding: 14px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+
+.row {
+  &.mt14 {
+    margin-top: 14px;
+  }
+}
+
+.center {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+</style>