新增每周食谱

2024-01-31 17:40:36 +08:00
parent 4438dbfe4d
commit ad52fa5c78
9 changed files with 544 additions and 1 deletions
@@ -0,0 +1,115 @@
+<template>
+  <el-table
+    border
+    :header-cell-style="{
+      background: '#f5f7fa',
+    }"
+    :data="tableData"
+    style="width: 100%; margin-top: 20px"
+    height="650"
+    size="mini"
+  >
+    <el-table-column
+      v-if="
+        column.label !== 'id' &&
+        column.label !== '审批人Id' &&
+        column.label !== '抄送人Id'
+      "
+      v-for="(column, index) in tableColumns"
+      :key="index"
+      :prop="column.prop"
+      :label="column.label"
+      width="auto"
+    >
+      <template slot-scope="scope">
+        <span v-if="column.type === 'text'"> {{ scope.row[column.prop] }}</span>
+        <div v-else-if="column.type === 'image'">
+          <img style="width: 200px; height: 100px" :src="scope.row[column.prop]" />
+        </div>
+      </template>
+    </el-table-column>
+
+    <el-table-column label="操作" width="160">
+      <template slot-scope="scope">
+        <el-button
+          @click="handleEdit(scope.row)"
+          class="el-icon-edit"
+          type="text"
+          size="small"
+          >编辑</el-button
+        >
+        <el-popconfirm @confirm="handleDelete(scope.row)" :title="'确定要删除吗？'">
+          <el-button
+            slot="reference"
+            style="margin-left: 10px; color: red"
+            class="el-icon-delete"
+            type="text"
+            size="small"
+            >删除</el-button
+          >
+        </el-popconfirm>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+<script>
+export default {
+  name: "CommonTablesImg",
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    deleteFunc: {
+      type: Function,
+      default: () => {},
+    },
+    editFunc: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {
+    // 删除事件
+    handleDelete(row) {
+      this.deleteFunc(row.id);
+    },
+    // 编辑事件
+    handleEdit(row) {
+      console.log(row);
+      this.editFunc(row);
+    },
+  },
+
+  computed: {
+    tableColumns() {
+      // 处理传进来的列配置，返回符合 Element UI 表格要求的配置
+      return this.columns.map((column) => {
+        return {
+          label: column.label,
+          prop: column.prop,
+          type: column.type,
+        };
+      });
+    },
+    tableData() {
+      // 处理传进来的数据，返回符合 Element UI 表格要求的数据
+      return this.data.map((rowData) => {
+        let row = {};
+        for (let column of this.columns) {
+          row[column.prop] = rowData[column.prop];
+        }
+        return row;
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped></style>