oldmaster/admin-web-master/src/views/serve/procedure.vue

<template>
  <div style="background-color:#f7f7f7;padding:10px 10px;">
    <div class="zhuti">
      <div style="height:58px;line-height:58px;">
        <div style="color:#0006"> <span>客服服务管理</span> <span style="padding:0 5px;">></span> <span
            style="color:#000000e6">公告通知发布</span></div>
      </div>
      <div>
        <!-- 搜索 -->
          <div style="margin-bottom:20px;">
            <el-button
                style="background-color: #3F9B6A;color: #fff;padding:8px 15px;" icon="el-icon-circle-plus-outline"
              @click="addbuss"
              >新增</el-button
            >
          </div>
        <!-- 表格 -->
        <el-table
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
           :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            width="auto"
            min-width="6%"
            align="center"
          >
          <template slot-scope="scope">
            {{scope.$index+1}}
          </template>
          </el-table-column>
          <el-table-column
            label="标题"
            prop="announcementTitle"
            width="auto"
            min-width="12%"
          />
          <el-table-column
            label="创建时间"
            prop="releaseTime"
            width="auto"
            min-width="12%"
          />
          <el-table-column
            label="创建人"
            prop="publisher"
            width="auto"
            min-width="12%"
          />
          <el-table-column label="操作" width="auto" min-width="17%">
            <template slot-scope="scope">
              <div class="tableBtn greens" @click="handleEditForm(scope.row)">
                详情
              </div>
              <div class="tableBtn greens" @click="bianjilist(scope.row)">
                编辑
              </div>
              <div class="tableBtn greens" @click="delGuan(scope.row)">
                删除
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 详情框  :visible.sync="detbox" -->
        <!-- <div  v-show="detbox" class="dialog_css_Xq " style="padding: 0;width:85%"> -->
        <el-dialog
          :visible.sync="detbox"
          custom-class="dialog_css"
          style="padding: 0"
          width="55%"
          center
          :close-on-click-modal="false"
          class="dialog_css_Xq"
          :show-close="false"
        >
          <div
            style="
              background-color: #fafafa;
              border: 1px solid #eaeaea;
              height: 42px;
              width: 100%;
              margin-bottom: 20px;
              padding: 0 20px;
              line-height: 42px;
            "
          >
            详情
          </div>
          <div style="padding: 0 20px">
            <div
              style="
                display: flex;
                justify-content: space-between;
                font-size: 14px;
                margin-bottom: 20px;
              "
            >
                  <div style="width: 100%">
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 14px; color: #000"
                                >公告标题</span
                              >
                            </div>
                            <div
                              v-if="edit"
                              style="
                                height: 38px;
                                line-height: 38px;
                                border: 1px solid #ebeef5;
                                padding: 0 20px;
                                font-size: 14px;
                              "
                            >
                            {{secondData.announcementTitle}}
                            </div>
                            <el-input
                              v-else
                              v-model="secondData.announcementTitle"
                              placeholder="请输入"
                              class="moren"
                            />
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                    <el-row style="height: 38px; margin-bottom: 15px">
                      <el-col :span="24">
                        <el-form
                          :inline="true"
                          label-width="100px"
                        >
                          <el-form-item prop="name" style="width: 100%">
                            <div
                              slot="label"
                              style="
                                text-align: left;
                                height: 38px;
                                line-height: 38px;
                                padding-left: 10px;
                              "
                            >
                              <span style="font-size: 14px; color: #000"
                                >公告内容</span
                              >
                            </div>
                            <div
                              style="
                                font-size: 14px;
                              "
                            >
                         <div style="border: 1px solid #ccc">
                           <div style="padding:20px;" v-if="edit" v-html="secondData.announcementContent"></div>
                           <wang-editor v-model="secondData.announcementContent" ref="editor" v-else></wang-editor>
                         </div>
                            </div>
                          </el-form-item>
                        </el-form>
                      </el-col>
                    </el-row>
                  </div>
            </div>
            <div
              style="
                margin-top: 50px;
                width: 99%;
                padding: 10px;
                display: flex;
                justify-content: flex-end;
              "
            >
              <el-button
               class="buttonHover"
                 style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
                @click="closeFn(1)"
                >取消</el-button
              >
              <el-button
              style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
                @click="bianji"
                >编辑</el-button
              >
              <el-button
               style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
                @click="msgeditS"
                >确定</el-button
              >
            </div>
          </div>
        </el-dialog>
        <!-- ******************************************************弹框开始****************************************************** -->
        <!-- 新增弹框 -->
        <el-dialog
          :visible.sync="ggXin"
          custom-class="dialog_css"
          style="padding: 0"
          width="55%"
          center
          :close-on-click-modal="false"
          class="dialog_css_Xq"
          :show-close="false"
        >
          <div
            style="
              background-color: #fafafa;
              border: 1px solid #eaeaea;
              height: 42px;
              width: 100%;
              margin-bottom: 20px;
              padding: 0 20px;
              line-height: 42px;
            "
          >
            新增
          </div>
          <div style="padding: 0 20px 20px 20px">
            <el-form ref="ruleForm" :model="ruleForm" label-width="100px">
              <el-form-item label="公告标题">
                <el-input
                  v-model="ruleForm.announcementTitle"
                  placeholder="请输入"
                  size="mini"
                />
              </el-form-item>
              <el-form-item label="公告内容">
                <div style="border: 1px solid #ccc">
                  <wang-editor v-model="ruleForm.announcementContent" ref="editor"></wang-editor>
                </div>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button
             class="buttonHover"
               style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;"
              @click="closeFn(2)"
              >取 消</el-button
            >
            <el-button
              style="background-color: #3F9B6A;color: #fff;padding:8px 15px;"
              @click="addCheck('ruleForm')"
              >确 定</el-button
            >
          </span>
        </el-dialog>
        <div class="fenye">
          <el-pagination
            class="pagination"
            :hide-on-single-page="flag"
            background
            small
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            layout="prev, pager, next,total"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import wangEditor from "@/components/editor/index";
import { uploadUrl,token } from '@/utils/request'
import {
 queryByPage,
 addId,
 editId,
 deleteById
} from '../../api/procedure';
export default {
  components: {wangEditor},
  data() {
    return {
      detbox: false, // 详情
      edit: true, // 编辑
      action: uploadUrl, // 上传图片
      myHeaders: {
        'Authorization-admin': token
      },
      ggXin: false, // 新增
      formSel: {
       belongingRegion:'',
       shopName:'',
       scheduledTime:''
      },
      secondData:{
      },
      ruleForm: {
       announcementTitle:'',//公告标题
       announcementContent:'',//公告内容
       releaseTime:''//时间
      },
      currentPage: 1,
      total: 100,
      flag: false,
      pageSize: 10,
      tableData: [],
      msgid: '',
      pageindex: {
        pageNumber: 1,
        pageSize: 10,
      },
    }
  },
  created() {
    this.getAll();
  },
  mounted() {},
  methods: {
    // 获取当前时间
    updateCurrentTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, '0');
      const day = now.getDate().toString().padStart(2, '0');
      const hours = now.getHours().toString().padStart(2, '0');
      const minutes = now.getMinutes().toString().padStart(2, '0');
      const seconds = now.getSeconds().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 查询全数据
    async getAll() {
      const res = await queryByPage(this.pageindex);
      this.tableData = res.data.content
      this.total = res.data.content.length
    },
    // 编辑
    bianji() {
      if (this.edit) {
        this.edit = false;
      }
    },
    bianjilist(item) {
      this.detbox = true;
      this.secondData = item;
      this.msgid = item.id;
      if (this.edit) {
        this.edit = false;
      }
    },
    // 查询
    async onSubmit() {},
    // 详情点击
   async handleEditForm(item) {
          this.secondData = item;
      this.detbox = true;
      this.msgid = item.id;
    },
    // 详情编辑确定
   async msgeditS(){
      await editId(this.secondData)
      this.detbox = false;
      this.edit = true
    },
    // 新增
    addbuss() {
      this.ruleForm={
       announcementTitle:'',
       announcementContent:'',
       releaseTime:''
      }
      this.ggXin = true;
    },
    // 新增确定
    async addCheck() {
      this.ruleForm.releaseTime = this.updateCurrentTime();
      const res = await addId(this.ruleForm)
      this.getAll();
      this.ggXin = false;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 取消
    closeFn(val) {
      if (val == 1) {
        this.detbox = false;
        this.edit = true;
      } else {
        this.ggXin = false;
      }
    },
    //删除列表
   async delGuan(item){
     await deleteById({id:item.id})
     this.getAll()
    },
  handleClick() {},
    // 上传
    handlePreview(file) {
      console.log(file);
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    // 重置按钮
    resetting() {
      this.formSel = {
        affiliation: '',
        createUser: '',
        createDate: '',
        contacts: '',
      };
      this.getAll();
    }
  },
};
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style scoped>
/deep/ .first-column-bg {
  background-color: #f4f4f5 !important;
}
.zhuti {
  padding: 0 20px 20px 20px;
  min-height: calc(100vh - 50px - 20px);
  background-color: #fff;
}
/deep/ .el-form-item__content {
  width: 80%;
}
.formSearch {
    display: flex;
    width: 100%;
    font-size: 14px;
    justify-content: space-between;
  }
.greens {
  color: #3f9b6a;
}
 /deep/ .el-table__row {
    font-size: 14px;
    color: #000000e6;
    height: 42px;
  }
.fenye {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #3f9b6a;
}
:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  /* background: #d3dce6; */
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/deep/ .bg-purple[data-v-0e3fe4ec] {
  background: #fff;
  height: 50px;
}
/deep/ .el-form--label-top .el-form-item__label {
  padding: 0;
}
.demo-input-suffix {
  display: flex;
  margin-right: 20px;
}
.pagination {
  text-align: right;
  line-height: 20px;
}
/deep/ .el-pagination__total {
  margin-top: 4px;
}
.dialog_css {
  padding: 0px;
}
.dialog_xin {
  padding: 0px;
}
/deep/.el-dialog__body {
  padding: 0px;
}
/deep/ .el-dialog__header {
  background-color: #fff;
  padding: 0;
}
/deep/.el-dialog__title {
  color: #000;
}
.el-row {
  &:last-child {
    margin-bottom: 0;
  }
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 108px;
  height: 108px;
  line-height: 108px;
  /*text-align: center;*/
}
.avatar {
  width: 108px;
  height: 108px;
  display: block;
}
::v-deep .el-tabs__item.is-active {
  color: #3f9b6a;
  opacity: 1;
}
/deep/ .el-tabs__nav-wrap::after {
  background-color: #fff;
}
/deep/ .el-tabs__active-bar {
  background-color: #389865;
}
/deep/ .el-table_2_column_13 {
  font-weight: 100;
}
::v-deep .el-input__inner:focus {
  border: #3f9b6a 1px solid;
}
::v-deep .el-input__inner:hover {
  border: #3f9b6a 1px solid;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  border-color: #3f9b6a;
}
::v-deep .el-form-item__label {
  font-weight: normal;
  font-size: 14px;
}
/* ::v-deep .el-steps .el-step__head.is-wait {
  background-color: red; /* 修改为你想要的颜色 */
/* 修改未进行步骤的描述文字颜色 */
::v-deep .el-steps .el-step__description.is-wait {
  color: #999;
  /* 修改为你想要的颜色 */
}
/* 修改未进行步骤的图标颜色 */
::v-deep .el-steps .el-step__icon.is-text.is-wait {
  color: #999;
  /* 修改为你想要的颜色 */
}
/* 修改未进行步骤的边框色 */
::v-deep .el-steps .el-step__line.is-wait {
  border-color: #eee;
  /* 修改为你想要的颜色 */
}
::v-deep .el-steps .is-process .el-step__line {
  background-color: #3f9b6a;
  /* 修改线的颜色 */
}
::v-deep .el-steps .is-process .el-step__title {
  color: #fe7b6a;
  /* 修改进行中步骤的标题颜色 */
}
::v-deep .el-steps .is-process .el-step__icon {
  color: #fff;
  /* 修改进行中步骤的图标颜色 */
  background: #3f9b6a;
  /* 修改进行中步骤图标的边框颜色 */
  border: 0px;
}
::v-deep .el-step__icon-inner {
  line-height: 0;
}
/* 线条长度 */
::v-deep .el-step.is-vertical .el-step__line {
  top: 30px;
  height: 60px;
}
::v-deep .moren {
  .el-input__inner {
    margin-top: 5px;
    padding: 0 20px;
  }
}
/deep/ .el-radio-group {
  margin-top: 11px;
}
/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: #3f9b6a;
  background: #3f9b6a;
}
::v-deep .el-col {
  padding: 0 !important;
}
/deep/ .el-radio-group {
  width: 100%;
}
.radio-right-side {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
/deep/ .radio-right-side .el-radio__label {
  display: flex;
  align-items: center;
}
/deep/ .radio-right-side .el-radio__inner {
  order: 1;
}
/deep/ .radio-right-side .el-radio__input {
  display: flex;
  order: 2;
}
/deep/ .radio-right-side {
  &:hover {
    color: #000;
  }
}
::v-deep .el-dialog__wrapper {
  .dialog_css {
    margin-left: 20%;
    margin-top: 61px !important;
    .el-dialog__title {
      font-size: 16px !important;
      font-weight: 600;
      color: #000;
    }
  }
}
::v-deep .setup {
  .el-steps {
    justify-content: center;
  }
}
::v-deep .el-step__head.is-finish {
  color: #c0c4cc;
  border-color: #c0c4cc;
}
::v-deep .el-step__title.is-finish {
  color: #c0c4cc;
}
::v-deep .el-step__title.is-process {
  color: #c0c4cc;
}
::v-deep .el-tabs {
  width: 100%;
}
::v-deep .setup{
  .el-step__main{
    margin-left: -17px;
  }
 .el-step__title.is-process{
   color: #3f9b6a;
 }
}
::v-deep .el-pagination__jump{
  margin-top:5px;
}
::v-deep .linClass{
.el-dialog__header{
padding: 20px 20px 10px;
font-size: 14px;
}
}
</style>
<style lang="scss" scoped>
  ::v-deep .bian_css {
    .el-dialog__header {
      padding: 0px;
    }
  }
  ::v-deep .buttonHover:hover {
    color: #3f9b6a !important;
    border-color: #c5e1d2 !important;
    background-color: #ecf5f0 !important;
    outline: none;
  }
  ::v-deep .el-pagination__total {
    position: absolute;
    left: 10px;
  }
  ::v-deep .diaslog_zhong {
    .el-dialog__body {
      padding: 10px 20px 20px 20px;
    }
    .el-upload--picture-card {
      width: 130px;
      height: 130px;
    }
  }
</style>