activity_manage/src/views/xtgl/hdlxgl/index.vue

<template>
  <div>
    <el-button type="primary" @click="handleAdd('0')">新增</el-button>

    <el-table :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="id" default-expand-all>
      <el-table-column label="类型名称" prop="label">
        <template slot-scope="scope">
          <span :class="{ text_bold: scope.row.pid === '0' }">{{ scope.row.label }}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleAdd(scope.row.id)">新增</el-link>
          <span style="color: #409eff; margin: 0 10px">|</span>
          <el-link type="primary" @click="handleEdit(scope.row)">编辑</el-link>
          <span style="color: #409eff; margin: 0 10px">|</span>
          <el-link type="primary" @click="handleDel(scope.row)">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="活动类型管理" :visible.sync="dialogFormVisible">
      <el-form :model="dialogForm" :rules="rules" ref="dialogFormRef">
        <!-- <el-form-item label="所属类型" prop="hh_pid">
          <el-cascader v-model="dialogForm.hh_pid" :options="tableData">
          </el-cascader>
        </el-form-item> -->
        <el-form-item label="类型名称" prop="hh_name">
          <el-input v-model="dialogForm.hh_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序" prop="hh_sort">
          <el-input v-model="dialogForm.hh_sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('dialogForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { defineComponent, ref } from '@vue/composition-api';
import { hdlx_list_tree, hdlx_delete, hdlx_add, hdlx_edit } from './api'
import { Message } from 'element-ui';
export default defineComponent({
  setup() {
    const tableData = ref([]);

    const handleQuery = () => {
      hdlx_list_tree().then(res => {
        tableData.value = res.data.one_info;
      })
    }
    handleQuery()

    let dialogMode = undefined //'add'|'edit'
    function handleAdd(pid) {
      dialogMode = 'add'
      dialogForm.value = {
        hh_pid: pid,
        hh_name: '',
        hh_sort: '1',
      }
      dialogFormVisible.value = true;
    }

    function handleEdit(row) {
      dialogMode = 'edit'
      dialogForm.value = {
        hh_id: row.id,
        // hh_pid: row.pid,
        hh_name: row.label,
        hh_sort: row.sort,
      }
      dialogFormVisible.value = true;
    }

    function handleDel(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        hdlx_delete({
          hh_id: row.id
        }).then(res => {
          if (res.code === '1') {
            Message({
              type: 'success',
              message: '删除成功!'
            });
            handleQuery()
          } else { }
        })
      }).catch(() => {
        Message.info('已取消删除')
      })
    }

    const dialogFormVisible = ref(false);
    const dialogForm = ref({
      hh_pid: '',
      hh_name: '',
      hh_sort: '1'
    });
    const rules = {
      hh_pid: [
        { required: true, message: '请选择所属类型', trigger: 'submit' },

      ],
      hh_name: [
        { required: true, message: '请输入类型名称', trigger: 'submit' },
      ],
      hh_sort: [
        { required: true, message: '请输入排序', trigger: 'submit' },
      ],
    };

    const dialogFormRef = ref()
    function onSubmit() {
      console.log('dialogFormRef :>> ', dialogFormRef);
      dialogFormRef.value.validate(valid => {
        if (valid) {
          if (dialogMode === 'add') {
            hdlx_add({ hdpb_hdlx: dialogForm.value }).then(res => {
              if (res.code === '1') {
                Message({
                  type: 'success',
                  message: '新增成功!'
                });
                dialogFormVisible.value = false;
                handleQuery()
              } else { }
            })
          } else if (dialogMode === 'edit') {
            hdlx_edit({
              hh_id: dialogForm.value.hh_id,
              hdpb_hdlx: {
                hh_name: dialogForm.value.hh_name,
                hh_sort: dialogForm.value.hh_sort,
              }
            }).then(res => {
              if (res.code === '1') {
                Message({
                  type: 'success',
                  message: '编辑成功!'
                });
                dialogFormVisible.value = false;
                handleQuery()
              } else { }
            })
          }
        } else {
          return false;
        }
      });
      // this.$refs.dialogFormRef.validate(valid => {
      //   if (valid) {
      //     this.$refs.dialogFormRef.resetFields();
      //     this.dialogFormVisible = false;
      //   } else {
      //     return false;
      //   }
      // });
    }


    return {
      tableData,
      handleAdd,
      handleEdit,
      handleDel,
      dialogFormRef,
      dialogForm,
      rules,
      dialogFormVisible,
      onSubmit
    }
  }
})
</script>


<style lang="scss">
.text_bold {
  font-weight: bold;
  font-size: 15px;
}
</style>