前端增删改查饿了么模板

表格显示

<template>
  <div class="parent">
    <rule-table :excel="false" table-title="" :more="false">
      <el-button slot="button" type="success" icon="el-icon-search" class="filter-item" :loading="false" @click="select">查询</el-button>
      <el-button slot="button" type="success" icon="el-icon-edit" class="filter-item" :loading="false" @click="handleAdd">添加</el-button>
      <div style="width: 100%; height: 100%;">
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column
            label="检查名称"
            style="width: 20%"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="针对领域"
            style="width: 20%"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.field }}</span>
            </template>
          </el-table-column>

          <el-table-column
            label="开展时间"
            style="width: 20%"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="配合部门"
            style="width: 20%"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.bmmc }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="详情资料内容"
            style="width: 20%"
            align="center"
          >
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.content }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="检查建议"
            style="width: 20%"
            align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.theProblem }}
              <!--内容太长会占用整个屏幕 重写 eltooltip 组件-->
              <el-tooltip class="item" effect="dark" :content="scope.row.theProblem" placement="top" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button type="danger" icon="el-icon-delete" circle size="small" @click="handleEdit(scope.row)" />
              <el-button type="primary" icon="el-icon-edit" circle size="small" @click="handleUpdate(scope.row)" />
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination style="text-align: center" layout="prev, pager, next" :total="Page.total" :page-size="Page.pageSize" @current-change="handleCurrentChange" />
      </div>
    </rule-table>
    <!--添加修改组件弹窗-->
    <SpecialInspectionadd :visible.sync="dialog.dialogFormVisible" :title="dialog.title" :detail="dialog.detail" @close="()=>{}" />
  </div>
</template>

<script>

import { getSpecialInspection, delSpecialInspection } from '@/api/surplus'
import SpecialInspectionadd from './specialInspectionadd'

export default {
  name: 'SpecialInspection',
  components: { SpecialInspectionadd },
  data() {
    return {
      tableData: [],
      dialog: { dialogFormVisible: false, title: '' },
      Page: { pageSize: 10, total: 0, pageIndex: 1 }
    }
  },
  watch: {
    // 关闭弹窗的时候进行数据刷新
    // 方法名就是指定要监听的data属性名，方法提供了两个值，newVal和oldVal故名思意
    // 即是改变之后的新值，和改变之前老值
    'dialog.dialogFormVisible': function(newVal, oldVal) {
      // console.log('dialogFormVisible值发生变化  改变的新值：' + newVal + '  之前的老值：' + oldVal)
      this.select()
    }
  },
  mounted() {
    // 页面创建完毕加载事件
    this.select()
  },
  methods: {
    select() {
      this.getSpecialInspection()
    },
    getSpecialInspection() {
      getSpecialInspection(this.Page).then(response => {
        if (response) {
          this.Page.total = response.count
          this.tableData = response.data
        }
      })
    },
    handleEdit(data) {
      delSpecialInspection(data).then(response => {
        if (response) {
          this.select()
          const h = this.$createElement
          this.$notify({
            title: response.data,
            message: h('i', { style: 'color: teal' }, response.data)
          })
        }
      })
    },
    handleCurrentChange(value) {
      this.Page.pageIndex = value
      this.select()
    },
    handleAdd() {
      this.dialog.dialogFormVisible = true
      this.dialog.title = '添加专项检查'
      this.dialog.detail = { 'state': 1 }
    },
    handleUpdate(ruleForm) {
      this.dialog.dialogFormVisible = true
      this.dialog.title = '修改专项检查'
      this.dialog.detail = ruleForm
    }
  }
}
</script>
<style>
.el-tooltip__popper{
  max-width:20%;
}
.el-tooltip__popper,.el-tooltip__popper.is-dark{
  background:rgb(48, 65, 86) !important;
  color: #fff !important;
  line-height: 24px;
}
</style>

添加修改 弹窗组件

<template>
  <rule-dialog :title="title" :visible.sync="visibleIn" :before-close="beforeClose">
    <el-row>
      <el-col :offset="1" :span="15">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" size="mini" label-width="100px" class="demo-ruleForm" >
          <el-form-item label="检查名称" prop="name">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="针对领域" prop="field">
            <el-input v-model="ruleForm.field" />
          </el-form-item>
          <el-form-item label="任务时间" prop="time">
            <el-date-picker
              v-model="ruleForm.time"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="配合部门" prop="departmentId">
            <el-select v-model="ruleForm.departmentId" placeholder="请选择活动区域">
              <el-option v-for="item in bmzd" :label="item.bmmc" :value="item.bmdm" />
            </el-select>
          </el-form-item>
          <el-form-item label="详情资料" prop="content">
            <el-input v-model="ruleForm.content" />
          </el-form-item>
          <el-form-item label="检查建议" prop="theProblem">
            <el-input v-model="ruleForm.theProblem" type="textarea" />
          </el-form-item>
          <el-form-item label="任务状态" prop="state">
            <el-radio-group v-model="ruleForm.state">
              <el-radio :label="1">进行中</el-radio>
              <el-radio :label="2">结束</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="beforeClose">取消</el-button>
      <el-button v-waves class="filter-item" size="small" type="success" @click="submitForm">确定</el-button>
    </div>
  </rule-dialog>
</template>

<script>
import { getSpecialInspectionAdd, getbmzd } from '@/api/surplus'

export default {
  name: 'SpecialInspectionadd',
  props: {
    visible: { type: Boolean, required: true },
    title: { type: String, default: '' },
    detail: { type: Object, default: () => { return {} } }
  },
  data() {
    return {
      bmzd: [],
      ruleForm: {
        name: '',
        field: '',
        time: null,
        departmentId: '',
        content: '',
        theProblem: '',
        state: 1
      },
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ],
        field: [
          { required: true, message: '请填写针对领域', trigger: 'change' }
        ],
        time: [
          { required: true, message: '请选择日期', trigger: 'change' }
        ],
        departmentId: [
          { required: true, message: '请选择配合部门', trigger: 'change' }
        ],
        content: [
          { required: true, message: '请输入详情', trigger: 'blur' }
        ],
        state: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    visibleIn: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
        if (!val) {
          this.$emit('close')
        }
      }
    }
  },
  watch: {
    detail: {
      handler(newVal, oldVal) {
        console.log('detail...')
        console.log('监听传入对象 进行数据回显')
        console.log(newVal)
        if (newVal !== null) {
          this.ruleForm = newVal
        } else {
          console.log('newVal===null')
          this.ruleForm = { }
        }
      }
    }
  },
  mounted() {
    getbmzd().then(response => {
      if (response) {
        console.log(response.data)
        this.bmzd = response.data
      }
    })
  },
  methods: {
    beforeClose() {
      // 取消按钮 关闭显示 不清空对象内容
      this.$emit('update:visible', false)
      this.$refs['ruleForm'].resetFields()
      // this.ruleForm = {}
    },
    submitForm() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          getSpecialInspectionAdd(this.ruleForm).then(response => {
            if (response) {
              this.$notify({
                message: response.data,
                type: 'success'
              })
              this.$emit('update:visible', false)
              this.ruleForm = {}
              this.$refs['ruleForm'].resetFields()
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

  }
}
</script>

添加和修改走同一个url接口 根据传的对象有没有id 进行判断是增加还是修改