merchant-web/src/views/modules/logistics-fare/logistics-template/index.vue

<template>
  <div>
    <obj-table-plus
      style="height: calc(100vh - 132px)"
      ref="oTable"
      mode="flex"
      :tableCols="tableCols"
      v-model="dataList"
      @query="queryList"
    >
      <div slot="tableTop" class="mb-2">
        <el-form inline>
          <el-form-item label="模板名称：">
            <el-input
              placeholder="请输入模板名称"
              v-model="searchForm.name"
            ></el-input>
          </el-form-item>
          <el-button type="primary" @click="$refs.oTable.reload()"
            >搜索</el-button
          >
        </el-form>
        <el-button type="primary" @click="addFareTemplate"
          >添加运费模板</el-button
        >
      </div>
    </obj-table-plus>
    <add-template
      ref="addTemplate"
      @refresh="$refs.oTable.refresh()"
    ></add-template>
  </div>
</template>

<script>
import addTemplate from "./popup/add-template.vue";
export default {
  components: { addTemplate },
  data() {
    return {
      dataList: [],
      searchForm: {
        name: "",
      },
    };
  },
  methods: {
    queryList(pageNo, pageSize) {
      this.$api.mer_admin
        .getShippingTemplatePage({
          pageNumber: pageNo,
          pageSize: pageSize,
          ...this.searchForm,
        })
        .then((res) => {
          console.log(res);
          this.$refs.oTable.complete(
            res.data.data.data,
            Number(res.data.data.total)
          );
        })
        .catch((err) => {
          this.$refs.oTable.complete(false);
        });
    },
    addFareTemplate() {
      this.$refs.addTemplate.toggle().add();
    },
  },
  computed: {
    tableCols() {
      return [
        {
          type: "jsx",
          render: (row) => {
            console.log(row);
            this.$api.mer_admin.getShippingTemplateInfo(row.id).then((res) => {
              console.log(res);
              // this.$set(row,tableData,);
            });
            const appointMapper = {
              0: "（全国包邮）",
              1: "（部分包邮）",
              2: "（自定义运费）",
            };

            const edit = () => {
              this.$api.mer_admin
                .getShippingTemplateInfo(row.id)
                .then((res) => {
                  console.log(res);
                  this.$refs.addTemplate.toggle().update(res.data.data);
                });
            };
            const copy = () => {
              this.$api.mer_admin
                .getShippingTemplateInfo(row.id)
                .then((res) => {
                  console.log(res);
                  this.$refs.addTemplate.toggle().copy(res.data.data);
                });
            };
            const remove = () => {
              this.$api.mer_admin.removeShippingTemplate(row.id)
              .then(res=>{
                this.$refs.oTable.refresh();
              })
            };
            return (
              <div class="mb-5">
                <div class="flex justify-between items-center bg-gray-100 px-4">
                  <div>
                    {row.name}
                    {appointMapper[row.appoint]}
                  </div>
                  <div class="flex justify-between items-center">
                    <div class="mr-5">最后编辑时间：{row.updateTime}</div>
                    <div>
                      <el-button type="text" onClick={copy}>
                        复制模板
                      </el-button>
                      <el-button type="text" onClick={edit}>
                        修改
                      </el-button>
                      <el-popconfirm class="ml-2" title="确认删除模板？" onConfirm={remove}>
                        <el-button type="text" slot="reference">
                          删除
                        </el-button>
                      </el-popconfirm>
                    </div>
                  </div>
                </div>
                <vxe-table border align="center" data={row.tableData}>
                  <vxe-column
                    width="180px"
                    field="a"
                    title="运送到"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="b"
                    title="首件（个）"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="c"
                    title="首费（元）"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="d"
                    title="续件（个）"
                  ></vxe-column>
                  <vxe-column
                    width="200px"
                    field="e"
                    title="运费（元）"
                  ></vxe-column>
                </vxe-table>
              </div>
            );
          },
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped></style>