vue+elment-ui实现编辑,详情,查看公用一个页面对话框 包括表单 删除详细代码

我们使用了对话框加上父与子传值的方式实现,我们话不多说直接上代码

父组件:

<template>
  <div>
    <el-card shadow="hover">
      <el-row>
        <el-form ref="articleTitle" :model="articleTitle">
          <el-col :span="6">
            <el-form-item label="公告名称:">
              <el-input
                type="text"
                placeholder="请输入公告名称..."
                v-model="articleTitle.title"
                style="width:150px;"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="公告类别:">
              <el-select
                v-model="articleTitle.articleType"
                clearable
                placeholder="请选择..."
                filterable
              >
                <el-option
                  v-for="item in article_type"
                  :key="item.code"
                  :label="item.value"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button @click="subquery" type="primary" plain>查询</el-button>
            <el-button @click="newSpeed" style="margin:0 25px;" type="default" plain>新建</el-button>
            <el-button @click="notempty" type="primary" plain>清空</el-button>
            <el-button @click="deleteAll" style="margin:0 25px;" type="default" plain>删除</el-button>
          </el-col>
        </el-form>
      </el-row>
    </el-card>
    <el-card style="margin-top:20px;" shadow="hover">
      <el-table
        ref="multipleTable"
        :data="articleinfo"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" width="120" label="编号"></el-table-column>
        <el-table-column prop="title" label="公告标题" show-overflow-tooltip></el-table-column>
        <el-table-column prop="articleType" label="公告类别"></el-table-column>
        <el-table-column prop="crtUserName" label="创建人"></el-table-column>
        <el-table-column prop="crtTime" label="创建时间"></el-table-column>
        <el-table-column prop="relatedNotes" label="备注"></el-table-column>
        <el-table-column label="操作" width="270">
          <template slot-scope="scope">
            <el-button @click="activeEditor(scope.row)" type="primary" plain>编辑</el-button>
            <el-button @click="Delete(scope.row)" type="default" plain>删除</el-button>
            <el-button @click="initDetails(scope.row)" type="primary" plain>详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="float:right;margin:20px;">
        <el-pagination
          :hide-on-single-page="false"
          next-text="下一页"
          prev-text="上一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="articleTitle.current"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="articleTitle.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-card>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <article-Service
        @close-dialog="closeDialog"
        :id="id"
        :dialogFormVisible="dialogFormVisible"
        :itemdetails="itemdetails"
        :name="name"
        :IsEdit="IsEdit"
        :dialogStatus = "dialogStatus"
      ></article-Service>
    </el-dialog>
  </div>
</template>
<script>
import articleService from '@/components/articleService/articleService.vue'
export default {
  // 文章列表
  name: 'PrevArticle',
  components: {
    articleService
  },
  data() {
    return {
      dialogStatus: null, // 这个是判断 是编辑就显示 修改 新建就显示 保存
      IsEdit: null, // 这个是传过去 保存按钮是否显示  因为我们 点击详情的时候 保存按钮是不显示的
      name: null, // 这个是判断 我们是 编辑还是 详情 根据状态显示不同的东西
      itemdetails: null, // 这个是获取到表单里面的数据
      id: undefined, // 传过去的id
      dialogFormVisible: false, // 对话框开启与否设置
      total: 0,
      articleTitle: {
        title: '', // 公告名称
        articleType: '', // 公告类别
        current: 1,
        size: 10
      },
      deleteall: [],
      article_type: [],
      articleinfo: []
    }
  },
  methods: {
    closeDialog() {
      this.dialogFormVisible = false
    },
    Editor(id) {
      activeEditor(id).then(res => {
        this.itemdetails = res.res.data[0]
        this.dialogFormVisible = true
      })
    },
    // 查看详情
    initDetails(row) {
      this.IsEdit = false
      this.name = true
      this.Editor(row.articleId)
      this.id = row.articleId
    },
    //  当点击编辑进行跳转页面
    activeEditor(row, val) {
      this.dialogStatus = 'true'
      this.IsEdit = true
      this.name = false
      this.Editor(row.articleId)
      this.id = row.articleId
    },
    // 新建
    newSpeed() {
      this.name = false
      this.IsEdit = true
      this.dialogStatus = 'false'
      // this.$router.push({ name: 'articleServer' })
      this.itemdetails = {}
      this.dialogFormVisible = true
    },
    // 批量删除
    deleteAll() {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
        // 这里面是 批量删除的实现
          const length = this.deleteall.length
          for (let i = 0; i < length; i++) {
            this.deleteall.push({ articleId: this.deleteall[i].articleId })
          }
          Delete(this.deleteall).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 重置功能
    notempty() {
      this.articleTitle.title = ''
      this.articleTitle.articleType = ''
      this.getList()
    },
    // 查询功能
    subquery() {
      const param = {
        articleType: this.articleTitle.articleType,
        title: this.articleTitle.title
      }
      List(param).then(res => {
        // debugger
        this.param = res.res.data.records
        // console.log(res)
        this.getList()
      })
    },
    // 下拉框字典项
    dictionaries() {
      dictsMap().then(res => {
        this.article_type = res.res.article_type
      })
    },
    // 当前页的数据
    handleCurrentChange(val) {
      this.articleTitle.current = val
      this.getList()
    },
    // 每页的一个条数
    handleSizeChange(val) {
      this.articleTitle.size = val
      this.getList()
    },
    getList() {
      List(this.articleTitle).then(res => {
        this.articleinfo = res.res.data.records
        // 这个是接口里面的数据
        this.total = res.res.data.total
      })
    },
    handleSelectionChange(val) {
      this.deleteall = val
    },
    // 删除功能
    Delete(row) {
      this.$confirm('此操作将永久删除, 是否继续?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.deleteall.push({ articleId: row.articleId })
          Delete(this.deleteall).then(() => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  mounted() {
    this.dictionaries()
    this.getList()
  }
}
</script>

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

子组件:

<template>
  <div>
      <el-form ref="itemdetails" :model="itemdetails" label-width="120px" :rules="RulesItemdetails">
        <el-form-item label="文章标题:" prop="title">
          <span v-if="this.name">{{itemdetails.title}}</span>
          <div v-else>
            <el-input
              v-model="itemdetails.title"
              style="width:200px;"
              placeholder="请输入文章标题..."
              clearable
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="发布人:" prop="crtUserName">
          <span v-if="this.name">{{itemdetails.crtUserName}}</span>
          <div v-else>
            <el-input
              v-model="itemdetails.crtUserName"
              style="width:200px;"
              placeholder="请输入发布人"
              clearable
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="公司名称:" prop="companyName">
          <span v-if="this.name">{{itemdetails.companyName}}</span>
          <div v-else>
            <el-input
              v-model="itemdetails.companyName"
              style="width:200px;"
              placeholder="请输公司名称"
              clearable
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="文章类型:" prop="articleType">
          <span v-if="this.name">{{itemdetails.articleType}}</span>
          <div v-else>
            <el-select v-model="itemdetails.articleType" clearable placeholder="请选择">
              <el-option
                style="width:200px;"
                v-for="item in articleType"
                :key="item.code"
                :label="item.value"
                :value="item.code"
              ></el-option>
            </el-select>
          </div>
        </el-form-item>
        <el-form-item label="发布时间:" prop="crtTime">
          <span v-if="this.name">{{itemdetails.crtTime}}</span>
          <div v-else>
            <el-date-picker value-format="yyyy-MM-dd" v-model="itemdetails.crtTime" placeholder="选择发布日期..."></el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="发布内容:" prop="context">
          <span v-if="this.name">{{itemdetails.context}}</span>
          <div v-else>
            <wangEnduit v-model="itemdetails.context" :isClear="isClear" @change="change"></wangEnduit>
          </div>
        </el-form-item>
        <el-form-item>
          <div v-show="IsEdit">
          <el-button v-if="dialogStatus === 'true'" type="primary" @click="submitForm('itemdetails')">修改</el-button>
          <el-button v-if="dialogStatus === 'false'" type="primary" @click="submit('itemdetails')">保存</el-button>
          <el-button @click="resetForm('itemdetails')">重置</el-button>
          </div>
        </el-form-item>
      </el-form>

  </div>
</template>

<script>
// 这里是引用的 富文本编辑器  
import wangEnduit from '@/components/wangEnduit/wangEnduit.vue'
export default {
  // 文章详情
  name: 'ArticleService',
  components: {
    wangEnduit
  },
  props: {
  //这个是 父页面传过来的 根据 状态显示不同的按钮
    dialogStatus: {
      type: String
    },
    // 这个是根据不同的状态是否显示保存 按钮
    IsEdit: {
      type: Boolean,
      default: true
    },
    // 根据这个状态显示不同东西  是详情还是 编辑
    name: {
      type: Boolean,
      default: false
    },
    // 这个是显示form表单
    itemdetails: {
      type: Object
    },
    // 这个是传过来的id
    id: {
      type: Number
    },
    // 对话框开启与否
    dialogFormVisible: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      dialogVisible: true,
      isClear: false,
      // 校验
      RulesItemdetails: {
        title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
        crtUserName: [
          { required: true, message: '请输入发布人', trigger: 'blur' }
        ],
        companyName: [
          { required: true, message: '请输入公司名称', trigger: 'blur' }
        ],
        articleType: [
          { required: true, message: '请选择公司类型', trigger: 'change' }
        ],
        crtTime: [
          {
            required: true,
            message: '请选择发布日期',
            trigger: 'blur'
          }
        ],
        context: [
          { required: true, message: '请填写文章内容', trigger: 'blur' }
        ]
      },
      articleType: []
    }
  },
  methods: {
    // 获取到数据
    Editor() {
      const id = this.id
      activeEditor(id).then(res => {
        this.itemdetails = res.res.data[0]
      })
    },
    change(val) {
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          nicEditors(this.itemdetails).then(() => {
          })
          this.$emit('close-dialog')
          this.$router.go(0)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    submit(formName) {
      const itemdetail = {
        context: this.itemdetails.context,
        title: this.itemdetails.title,
        crtUserName: this.itemdetails.crtUserName,
        articleType: this.itemdetails.articleType,
        companyName: this.itemdetails.companyName
      }
      this.$refs[formName].validate(valid => {
        if (valid) {
          addArticle(itemdetail).then(() => {
          })
          this.$emit('close-dialog')
          this.$router.go(0)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  },
}
</script>

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

作者是第一次发文章 还是一个小萌新 包括写代码也是小萌新 如果哪里有错误的地方 请见谅
转发请带上原作者的链接