20260803173356

code/新建文件夹/cw/components/hldlg.vue

@@ -0,0 +1,204 @@
+<script setup>
+import { defineEmits, defineProps, ref, watch } from "vue";
+import { morePermission } from "@/utils/auth";
+
+const props = defineProps({
+  visible: { type: Boolean, default: false },
+  title: { type: String, default: "选择数据" },
+  params: {
+    type: Object,
+    default: () => ({
+      moneyId: "",
+      feeMoneyIds: [],
+    }),
+  },
+});
+const emit = defineEmits(["update:visible", "confirm"]);
+
+const tableData = ref([]);
+const localVisible = ref(props.visible);
+(watch(
+  () => props.visible,
+  (val) => {
+    localVisible.value = val;
+    if (val) {
+      tableData.value = props.params.feeMoneyIds.map((item, index) => ({
+        id: index + 1,
+        feeMoneyId: item, // 费用币种
+        moneyId: props.params.moneyId, // 收款币种
+        exrate: item === props.params.moneyId ? 1 : "", // 汇率默认值
+      }));
+    }
+  },
+),
+  { immediate: true });
+// 关闭弹窗
+function handleClose() {
+  emit("update:visible", false);
+}
+
+// 点击确认
+function handleConfirm() {
+  emit("confirm", tableData.value);
+  emit("update:visible", false);
+}
+
+const columns = [
+  {
+    prop: "feeMoneyId",
+    label: "费用币种",
+    edit_width: "90",
+    readOnly: "1",
+  },
+  {
+    prop: "moneyId",
+    label: "收款币种",
+    edit_width: "90",
+    readOnly: "1",
+  },
+  {
+    prop: "exrate",
+    label: "汇率",
+    edit_width: "110",
+  },
+];
+</script>
+<template>
+  <el-dialog
+    v-model="localVisible"
+    :title="title"
+    width="400px"
+    :before-close="handleClose"
+    align-center
+    class="g3dialogfooter"
+    draggable
+  >
+    <div class="g3pagecontainer">
+      <div class="g3container">
+        <vxe-table
+          ref="tableRef"
+          border
+          stripe
+          header-align="center"
+          :data="tableData"
+          :filter-config="{
+            showIcon: false,
+          }"
+          :column-drag-config="{
+            showIcon: false,
+            trigger: 'cell',
+          }"
+          :row-config="{
+            useKey: true,
+            keyField: 'id',
+          }"
+          :cell-config="{
+            height: 26,
+          }"
+          :column-config="{
+            resizable: true,
+            drag: true,
+          }"
+          :edit-config="{
+            trigger: 'click',
+            mode: 'row',
+            autoClear: false,
+            showStatus: false,
+            showIcon: false,
+          }"
+          show-overflow
+          show-header-overflow
+          show-footer-overflow
+          height="100%"
+        >
+          <vxe-column
+            v-for="column in columns"
+            :key="column.prop"
+            :field="column.prop"
+            :title="column.label"
+            :width="column.edit_width || column.width"
+            align="center"
+            :edit-render="{ autoFocus: true, enabled: true }"
+          >
+            <template #edit="{ row }">
+              <el-input
+                v-model="row[column.prop]"
+                size="small"
+                :disabled="column.readOnly === '1'"
+              />
+            </template>
+          </vxe-column>
+        </vxe-table>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialogfooter">
+        <el-button @click="handleClose" class="g3button"> 取消 </el-button>
+        <el-button
+          type="primary"
+          @click="handleConfirm"
+          class="g3button"
+          :disabled="morePermission(3)"
+        >
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<style lang="scss" scoped>
+.g3pagecontainer {
+  box-sizing: border-box;
+  display: flex;
+  width: 100%;
+  height: 180px;
+  padding: 2px 2px;
+}
+.g3container {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  height: 100%;
+  padding: 10px 10px 0px 10px;
+  background-color: #ffffff;
+}
+.dialogfooter {
+  margin: 8px 0px 16px 0px;
+  padding-right: 10px;
+}
+.g3button {
+  border-radius: 8px;
+}
+
+:deep(.vxe-cell) {
+  padding: 0px !important;
+}
+</style>
+<style>
+.el-dialog.g3dialogfooter {
+  --el-dialog-padding-primary: 4px;
+}
+.el-dialog.g3dialogfooter .el-dialog__header {
+  padding: 3px 20px 5px 0px;
+}
+.el-dialog.g3dialogfooter .el-dialog__title {
+  color: #1f2225;
+  margin-left: 11px;
+  font-size: 14px;
+  font-weight: 600;
+  font-family:
+    v-sans,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif,
+    "Apple Color Emoji",
+    "Segoe UI Emoji",
+    "Segoe UI Symbol";
+}
+.el-dialog.g3dialogfooter .el-dialog__headerbtn {
+  width: 38px;
+  height: 42px;
+}
+</style>