cms-admin-ui/src/views/communityGovernance/merchant.vue

<template>
  <div class="app-container" v-loading="loading">
    <FilterList :readOnly="false" v-if="tableData" :pagination="true" :options="options" :operate="false"
      :filed="listFileds" :tableData="tableData" :total="total" @query="query" @edit="listEdit" @delete="listDel"
      @add="add">
      <template v-slot:tablesOperate="{ scope }">
        <el-button type="text" size="mini" @click="listRecord(scope.row)">记录</el-button>
        <el-button type="text" size="mini" @click="listEdit(scope.row)">修改</el-button>
        <el-button type="text" size="mini" @click="listDel(scope.row)">删除</el-button>
      </template>
    </FilterList>
    <el-dialog :title="dialogInfo.title" :visible.sync="dialogInfo.dialogVisible" :width="dialogInfo.width">
      <dynamicForm :readOnly="readOnly" ref="dynamicForm" v-if="formFiled && dialogInfo.dialogVisible" :filed="formFiled"
        :data="formData" @save="formSave"></dynamicForm>
    </el-dialog>
  </div>
</template>
  
<script>
// 商户管理
import _ from 'lodash';
import { businessAdd, businessUpdate, businessDel, businessQuery, businessFetch } from "@/api/communityGovernance/merchant";
export default {
  name: "merchant",
  dicts: [],
  data() {
    return {
      tableData: [],
      total: 0,
      listFileds: [
        { label: "商户名称", name: "name", filter: true },
        { label: "负责人", name: "responsible", filter: true },
        { label: "联系电话", name: "phone", filter: true },
        { label: "评分", name: "point" },
      ],
      dialogInfo: {
        title: "",
        dialogVisible: false,
        width: "50%",
      },
      formFiled: [
        { label: "门店照片", name: "image", formater: "imageUpload" },
        { label: "商户名称", name: "name" },
        { label: "负责人", name: "responsible" },
        { label: "联系电话", name: "phone" },
        { label: "详细描述", name: "description", formater: 'editor' },
      ],
      formData: {},
      loading: false,
      operation: [],
      options: {
        width: '180'
      },
      readOnly: false
    };
  },
  async created() {
    this.query();
  },
  methods: {
    // 列表查询
    async query(e) {
      this.loading = true;
      const res = await businessQuery({ ...e, pageNum: e?.pageNum ?? 1, pageSize: e?.pageSize ?? 10 });
      if (res.code == 200) {
        this.tableData = res.rows.map(j => ({ ...j, point: j.point ?? '无' }));
        this.total = res.total;
      }
      this.loading = false;
    },
    // 列表修改
    async listEdit(e) {
      // this.readOnly = true;
      this.loading = true;
      const res = await businessFetch(e.id);
      if (res.code == 200) {
        this.formData = res.data;
        this.dialogInfo.title = `修改商户`;
        this.dialogInfo.dialogVisible = true;
      }
      this.loading = false;
    },
    // 列表删除
    async listDel(e) {
      this.$modal.confirm('是否确认删除"').then(function () {
        return businessDel([e.id]);
      }).then(() => {
        this.query();
        this.$modal.msgSuccess('删除成功');
      }).catch(() => { });
    },
    // 添加
    async add() {
      this.readOnly = false;
      this.formData = {};
      this.dialogInfo.title = `添加商户`;
      this.dialogInfo.dialogVisible = true;
    },
    // 列表查看评分记录
    async listRecord(e) {
      console.log(e);
      this.$router.push(`/communityGovernance/community_governance_record?id=${e.id}`);
    },
    // 表单保存
    async formSave(e) {
      this.loading = true;
      let res;
      // 修改
      if (e.id) res = await businessUpdate(e);
      // 新增
      if (!e.id) res = await businessAdd(e);
      if (res.code == 200) {
        this.$modal.msgSuccess(`${e.id ? '修改' : '新增'}成功`);
        this.dialogInfo.dialogVisible = false;
        this.query();
      }
      this.loading = false;
    },
  }
};
</script>