From 9c7a2ac1fb362b2577519a4f233502bef64caf34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=9C=E7=AC=99=E6=AD=8C?= <2277317060@qq.com>
Date: Fri, 10 Jan 2025 15:21:59 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=88=B6=E5=AD=90=E8=A1=A8?=
 =?UTF-8?q?=E6=A0=BC=E8=81=94=E5=8A=A8=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/wms/linkage/index.vue | 350 ++++++++++++++++++++++++++++++++
 1 file changed, 350 insertions(+)
 create mode 100644 src/views/wms/linkage/index.vue

diff --git a/src/views/wms/linkage/index.vue b/src/views/wms/linkage/index.vue
new file mode 100644
index 0000000..a62b46d
--- /dev/null
+++ b/src/views/wms/linkage/index.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="p-2">
+    <el-card shadow="never">
+      <el-form label-width="120px" label-position="right" :inline="true" :model="queryForm" class="demo-form-inline">
+        <el-form-item label="字段1">
+          <el-input v-model="queryForm.user" placeholder="字段1" clearable/>
+        </el-form-item>
+        <el-form-item label="字段2">
+          <el-select
+            v-model="queryForm.region"
+            placeholder="字段2"
+            clearable
+          >
+            <el-option label="选项1" value="shanghai"/>
+            <el-option label="选项2" value="beijing"/>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="字段3">
+          <el-date-picker
+            v-model="queryForm.date"
+            type="date"
+            placeholder="字段3"
+            clearable
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="query">查询</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+
+    <el-card style="margin-top: 8px" shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="parentTableAdd">新增</el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="ids.length !== 1" @click="parentTableUpdate()">修改
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="danger" plain icon="Delete" :disabled="ids.length < 1" @click="parentTableDelete()">删除
+            </el-button>
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
+          </el-col>
+          <right-toolbar v-model:showSearch="showSearch" :columns="columns" :search="true"
+                         @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+      <el-table :data="tableData" style="width: 100%" @cell-click="parentTableCellClick"
+                @selection-change="selectionChange" ref="parentTableRef">
+        <el-table-column type="selection" width="55"/>
+        <el-table-column label="Date" prop="date"/>
+        <el-table-column label="Date" prop="name"/>
+        <el-table-column label="Operations" fixed="right" width="200">
+          <template #default="scope">
+            <el-button size="small" @click.stop="viewDetails(scope.row)">
+              查看
+            </el-button>
+            <el-button size="small" @click.stop="parentTableUpdate(scope.row)">
+              修改
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              @click.stop="parentTableDelete(scope.row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-card style="margin-top: 8px" shadow="never">
+      <el-table :data="tableData1" style="width: 100%">
+        <el-table-column label="Date" prop="date"/>
+        <el-table-column label="Date" prop="name"/>
+        <el-table-column label="Operations" fixed="right" width="200">
+          <template #default="scope">
+            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+              查看
+            </el-button>
+            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+              修改
+            </el-button>
+            <el-button
+              size="small"
+              type="danger"
+              @click="handleDelete(scope.$index, scope.row)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="100%" fullscreen>
+      <el-card shadow="never">
+        <el-form :model="dialogForm" :inline="true">
+          <el-form-item label="字段1" label-width="120px">
+            <el-input v-model="dialogForm.name" autocomplete="off"/>
+          </el-form-item>
+          <el-form-item label="字段2" label-width="120px">
+            <el-select v-model="dialogForm.region" placeholder="Please select a zone">
+              <el-option label="Zone No.1" value="shanghai"/>
+              <el-option label="Zone No.2" value="beijing"/>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </el-card>
+      <el-card style="margin-top: 8px" shadow="never">
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" @click="addDialogTableCell">新增</el-button>
+          </el-col>
+        </el-row>
+        <el-table :data="dialogtable" style="width: 100%">
+          <el-table-column label="字段1" prop="date">
+            <template #default="scope">
+              <el-select
+                v-model="scope.row.date"
+                placeholder="Select"
+                size="small"
+              >
+                <el-option
+                  label="1"
+                  value="1"
+                />
+                <el-option
+                  label="2"
+                  value="2"
+                />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="字段2" prop="name">
+            <template #default="scope">
+              <el-input v-model="scope.row.name" style="width: 240px" placeholder="Please input" />
+            </template>
+          </el-table-column>
+          <el-table-column label="Operations" fixed="right" width="200">
+            <template #default="scope">
+              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+                查看
+              </el-button>
+              <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
+                修改
+              </el-button>
+              <el-button
+                size="small"
+                type="danger"
+                @click="handleDelete(scope.$index, scope.row)"
+              >
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">关闭</el-button>
+          <el-button type="primary" @click="dialogSubmit">
+            确定
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Linkage" lang="ts">
+
+import {reactive} from 'vue'
+import {ElMessage, ElMessageBox} from 'element-plus'
+
+interface User {
+  date: string
+  name: string
+  address: string
+}
+
+const dialogVisible = ref(false)
+const dialogTitle = ref('添加')
+const dialogForm = reactive({})
+
+const queryForm = reactive({
+  user: '',
+  region: '',
+  date: '',
+})
+const parentTableRef = ref()
+const tableData = ref([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+])
+const ids = ref([])
+const tableData1 = ref([
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+])
+const dialogtable = ref([])
+
+const onSubmit = () => {
+  console.log('submit!')
+}
+
+const handleEdit = (index: number, row: User) => {
+  console.log(index, row)
+}
+const handleDelete = (index: number, row: User) => {
+  console.log(index, row)
+}
+const query = () => {
+  console.log(queryForm)
+  ids.value = []
+  parentTableRef.value.clearSelection()
+}
+
+// 父表格行点击
+const parentTableCellClick = (e) => {
+  console.log(e.date)
+  tableData1.value = tableData1.value.map(v => {
+    return {
+      ...v,
+      date: e.date
+    }
+  })
+}
+
+// 表格多选
+const selectionChange = (e) => {
+  ids.value = e.map(v => v.name)
+  console.log(ids.value)
+}
+// 查看
+const viewDetails = (e) => {
+  console.log(e)
+}
+
+// 父表格新增
+const parentTableAdd = () => {
+  dialogVisible.value = true
+}
+// 父表格修改
+const parentTableUpdate = (e) => {
+  let id = ref(null)
+  if (e) {
+    id.value = e.name
+  } else {
+    id.value = ids.value?.[0]
+  }
+  if (!id.value) return
+  dialogVisible.value = true
+}
+// 父表格删除
+const parentTableDelete = (e) => {
+  const delList = ref([])
+  if (e) {
+    delList.value = [e.name]
+  } else {
+    delList.value = ids.value
+  }
+  console.log(delList.value)
+  ElMessageBox.confirm(
+    '确定要删除这些数据吗?',
+    'Warning',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      ElMessage({
+        type: 'success',
+        message: '删除完成',
+      })
+    })
+    .catch(() => {
+      ElMessage({
+        type: 'info',
+        message: '取消',
+      })
+    })
+
+}
+
+// 添加子表格行
+const addDialogTableCell = () => {
+  dialogtable.value.push({})
+}
+
+// dialog提交
+const dialogSubmit = () => {
+  console.log(dialogForm)
+  console.log(dialogtable.value)
+  dialogVisible.value = false
+}
+</script>
+<style>
+.demo-form-inline .el-input {
+  --el-input-width: 220px;
+}
+
+.demo-form-inline .el-select {
+  --el-select-width: 220px;
+}
+</style>