feat:拼单设置

src/pages/Activity/releaseProduc/components/spellOrderSet.vue

@@ -6,38 +6,121 @@
       type="datetimerange"
       start-placeholder="开始日期"
       end-placeholder="结束日期"
-      :default-time="defaultTime">
+      :default-time="defaultTime"
+    >
     </el-date-picker>
   </div>
   <div>
     <el-card>
-      <span>自提点设置</span>
-      <el-form ref="form" :model="form" label-width="80px">
-        <el-form-item label="label">
-          <el-input v-model="model"></el-input>
+      <span >自提点设置</span>
+      <div class="set">
+      <el-form ref="form" :model="selfLiftingPoint"  label-width="80px">
+        <el-form-item>
+          <el-input
+            v-model="selfLiftingPoint"
+            placeholder="自提点名称/自提点联系人"
+            suffix-icon="el-icon-search"
+          ></el-input>
         </el-form-item>
+        <el-form-item>
+          <el-button type="primary">添加自提点</el-button>
+        </el-form-item>
+          <span>已选</span>
+        <el-table
+          ref="multipleTable"
+          :data="tableData"
+          border
+          tooltip-effect="dark"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column align="center" type="selection" width="80">
+          </el-table-column>
+          <el-table-column label="自提点名称" align="center" width="width">
+            <template #default="scope">{{ scope.row.date }}</template>
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            align="center"
+            label="位置"
+            width="width"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            align="center"
+            label="详细地址"
+            width="width"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            align="center"
+            label="自提点联系人"
+            width="width"
+          >
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            align="center"
+            label="操作"
+            width="width"
+          >
+            <template #default="scope">
+              <el-button
+                type="primary"
+                size="small"
+                @click="handleModify(scope.row)"
+                >修改</el-button
+              >
+              <el-popconfirm title="确定要删除此自提点吗？">
+                <template #reference>
+                  <el-button
+                    type="primary"
+                    size="small"
+                    @click="handleDelete(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-popconfirm>
+            </template>
+          </el-table-column>
+        </el-table>
       </el-form>
+    </div>
     </el-card>
   </div>
 </template>
 
 <script>
 export default {
-data() {
-  return{
-    value1:'',
-    defaultTime: [
-          new Date(2000, 1, 1, 12, 0, 0),
-          new Date(2000, 2, 1, 8, 0, 0)
-        ] 
-  }
-}
-}
+  data() {
+    return {
+      value1: "",
+      defaultTime: [
+        new Date(2000, 1, 1, 12, 0, 0),
+        new Date(2000, 2, 1, 8, 0, 0),
+      ],
+      selfLiftingPoint: "",
+      tableData: [],
+      multipleSelection: [],
+    };
+  },
+  methods: {
+    // 复选框
+    handleSelectionChange(val) {
+      this.multipleSelection = val;
+    },
+  },
+};
 </script>
 
 <style lang="less" scope>
-  .spellOrderSet {
-    text-align: center;
-    margin: 50px 0;
+.spellOrderSet {
+  text-align: center;
+  margin: 50px 0;
+  .set {
+    margin-top: 50px;
   }
+}
 </style>
\ No newline at end of file