Infsea.vue

<template>
  <div class="eibs-tab">
    <el-form
      class="m-table-search-form"
      ref="paramsForm"
      label-position="right"
      label-width="110px"
      size="small"
      :rules="rules"
    >
      <c-row>
        <c-col :span="24">
          <c-col :span="8">
            <el-form-item label="公告标题" prop="theme" style="width: 100%">
              <c-input
                v-model="model.theme"
                maxlength="20"
                placeholder="请输入标题名称"
              ></c-input>
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item
              label="创建时间"
              prop="opndatfrom"
              style="width: 100%"
            >
              <c-col :span="11">
                <c-date-picker
                  type="date"
                  v-model="model.opndatfrom"
                  style="width: 100%"
                  placeholder="请选择"
                ></c-date-picker>
              </c-col>
              <c-col :span="2" style="text-align: center">
                <label style="display: inline-block; width: 100%">-</label>
              </c-col>
              <c-col :span="11">
                <c-date-picker
                  type="date"
                  v-model="model.opndatto"
                  style="width: 100%"
                  placeholder="请选择"
                ></c-date-picker>
              </c-col>
            </el-form-item>
          </c-col>
          <c-col :span="8">
            <el-form-item label="发布机构" prop="unit" style="width: 100%">
              <c-input
                v-model="model.unit"
                maxlength="40"
                placeholder="请输入机构名称"
              ></c-input>
            </el-form-item>
          </c-col>
        </c-col>
      </c-row>

      <!-- </template> -->
      <c-col :span="24" style="text-align: right; height: 36.8px">
        <el-button size="small" @click="handleReset">重置</el-button>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleSearch"
          >查询</el-button
        >
      </c-col>
    </el-form>
    <c-col :span="24">
      <div style="border-bottom: 10px solid rgb(232, 232, 232)"></div>
    </c-col>

    <c-col :span="24" style="margin: 10px 0px">
      <c-button
        class="medium_bcs"
        size="medium"
        type="primary"
        style="margin-left: 0px"
        @click="ruleAdd()"
        >添加公告</c-button
      >
    </c-col>

    <c-col :span="24">
      <!-- <c-istream-table :list="stmData.data" :columns="stmData.columns"> -->
        <el-table
         :border="true"
        :data="stmData.data.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        
      
        style="width:80%,text-align:center" :header-cell-style="{background:'rgb(235, 235, 235)',color:'#000'}" >
        <!-- <el-table-column  label="编号"  prop="tid" width="200px"  >
         
        </el-table-column> -->
        <el-table-column  label="标题"  prop="theme" width="400px"  >
        
        </el-table-column>

        <el-table-column label="发布机构" prop="unit" width="200px">
        </el-table-column>
        <el-table-column  label="发布人" prop="pubname" width="200px"   >
          
        </el-table-column>
        
        <el-table-column  label="时间"  prop="dat" width="200px "   >
          
        </el-table-column>
        <el-table-column fixed="right" prop="op" label="操作" width="200px">
          <template slot-scope="scope">
            <c-button
              style="margin-left: 0"
              size="small"
              @click="ruleDetail(scope)"
            >
              详情
            </c-button>

            <c-button
              style="margin-left: 0"
              size="small"
              type="primary"
              @click="ruleEdit(scope)"
            >
              编辑
            </c-button>
            <c-button
              style="margin-left: 0"
              size="small"
              type="primary"
              @click="ruleDel(scope.$index)"
            >
              删除
            </c-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 12px 0px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="stmData.data.length"
      >
      </el-pagination>

      <!-- </c-istream-table> -->
    </c-col>
    <el-dialog
      :visible.sync="showPanel"
      :title="opttitle"
      append-to-body
      :before-close="cancel"
    >
      <el-form
          class="m-table-search-form"
          ref="paramsForm"
          label-position="right"
          label-width="110px"
          size="small"
          :rules="rules"
        >  
          <c-row>
            <c-col :span="24">
              <c-col :span="24">
                <c-input v-if="showIndex" style="visibility: hidden" v-model="model.edit.index" ></c-input>
                    
                        
                              <el-form-item label="标题:"  prop="edit.theme" style="width: 100%">
                                   <c-input
                                  v-model="model.edit.theme"
                                   maxlength="200" 
                                   placeholder="请输入标题内容"
                                   :disabled="isDetail"
                                   @keyup.enter.native="defaultFunction('edit.theme',model.edit.theme)"
                                   ></c-input>
                              </el-form-item>
                        
                    </c-col>
                    <c-col :span="24">

                              <el-form-item label="发布机构:" prop="edit.unit" style="width: 100%" >
                                   <c-input 
                                  v-model="model.edit.unit"
                                   maxlength="20" 
                                   placeholder="请输入机构名称"
                                   :disabled="isDetail"
                                    @keyup.enter.native="defaultFunction('edit.unit',model.edit.unit)"
                                   ></c-input>
                              </el-form-item>
                    </c-col>
                    <c-col :span="24">

            <c-col :span="24">
              <el-form-item
                label="公告内容:"
                prop="edit.content"
                style="width: 100%"
              >
                <c-input
                  v-model="model.edit.content"
                  type="textarea"
                  rows="20"
                  maxlength="2000"
                  show-word-limit
                  placeholder="请输入公告内容"
                  :disabled="isDetail"
                >
                </c-input>
              </el-form-item>
            </c-col>

                              <el-form-item label="发布时间:" prop="edit.dat" style="width: 50%">
                               <c-date-picker
                                   type="date"
                                   v-model="model.edit.dat"
                                   value-format="yyyy-MM-dd"
                                   placeholder="请选择时间"
                                   disabled
                              >
                              </c-date-picker>

                              </el-form-item>
                    </c-col>
                    <c-col :span="24">

                     <el-form-item label="可见范围:" prop="edit.visunit" style="width: 100%" >
                                <!-- <c-select
                                  v-model="model.edit.visunit"
                                  style="width: 100%"
                                  placeholder="请选择可见范围"
                                  :disabled="isDetail"
                                >
                                  <el-option
                                    v-for="item in range"
                                     :key="item.value"
                                     :label="item.label"
                                     :value="item.value"
                                    
                                  >
                                  </el-option>
                               </c-select> -->
                               <c-checkbox-group v-model="model.edit.visunit"
                                  style="width: 100%"
                                  placeholder="请选择可见范围"
                                  :disabled="isDetail">
                                    <el-checkbox label="总行"></el-checkbox>
                                    <el-checkbox label="分行"></el-checkbox>
                                    <br/>
                                    <el-checkbox label="上海总行"></el-checkbox>
                                    <el-checkbox label="北京总行"></el-checkbox>
                                    <el-checkbox label="广州总行"></el-checkbox>
                                    <el-checkbox label="深圳总行"></el-checkbox>
                                    <el-checkbox label="上海分行"></el-checkbox>
                                    <el-checkbox label="北京分行"></el-checkbox>
                                    <el-checkbox label="广州分行"></el-checkbox>
                                    <el-checkbox label="深圳分行"></el-checkbox>
                               </c-checkbox-group>
                             </el-form-item>
                    </c-col>

                    <c-col :span="24">

                             <el-form-item label="公告内容:" prop="edit.content" style="width: 100%" >

                             <c-input 
                                        v-model="model.edit.content"
                                        type="textarea" 
                                        rows ="20"
                                        maxlength="2000" 
                                        show-word-limit 
                                        placeholder="请输入公告内容"
                                        :disabled="isDetail"
                                         >
                             </c-input>
                             </el-form-item>
                           
                    </c-col>
              </c-col>

          <c-col
            :span="24"
            style="text-align: center; height: 36.8px"
          >
            <el-button
              type="primary"
              size="small"
              @click="submitData"
              v-if="optType"
              >提交</el-button
            >
            <el-button style="margin-left: 0" size="small" @click="cancel">
              返回
            </el-button> 
          </c-col>
          </c-row>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>
import Api from "~/service/Api";
import commonProcess from "~/mixin/commonProcess";
import CodeTable from "~/config/CodeTable";
import Event from "~/model/Notice/Event";
import { my,noticeQuery} from "~/service/notice";

export default {
  inject: ["root"],
  props: ["model", "rules"],
  mixins: [commonProcess],
  components: {},
  data() {
    return {
      showPanel: false,
      opttitle: "",
      optType: true,
      dialogTableVisible: false,
      isDetail: true,
      showIndex: false,
      nowDate: "",

      currentPage: 1, //初始页
      pagesize: 6, //    每页的数据
      total: 0,

      indexNum: 0, //定义一级菜单的下标
      trnData: {
        columns: ['1 1 "附加条款内容文本" 300', '2 2 "智能审单规则" 500'],
        data: [],
      },
      stmData: {
        columns: ['1 1 "标题" 400', '2 2 "发布机构" 400', '3 3 "发布时间" 200'],
        data: [],
      },
      range: [
        {
          value: "all",
          label: "所有机构可见",
        },
        {
          value: "under",
          label: "下属机构可见",
        },
        {
          value: "sl",
          label: "平级机构可见",
        },
      ],
      
     
    };
  },
  methods: {
    ...Event,

    ruleDetail(scope) {
      this.model.edit.theme = scope.row.theme;
      this.model.edit.unit = scope.row.unit;
      this.model.edit.dat = scope.row.dat;
      this.model.edit.pubname = scope.row.pubname;
      this.model.edit.content = scope.row.content;
      this.model.edit.index = scope.row.tid;
      this.model.edit.visunit = scope.row.visunit;
      this.isDetail = true;
      this.opttitle = "公告详情";
      this.optType = false;
      this.showPanel = true;
    },

    ruleEdit(scope) {
      this.model.edit.theme = scope.row.theme;
      this.model.edit.unit = scope.row.unit;
      this.model.edit.dat = scope.row.dat;
      this.model.edit.pubname = scope.row.pubname;
      this.model.edit.content = scope.row.content;
      this.model.edit.visunit = scope.row.visunit;
      this.isDetail = false;
      this.opttitle = "公告修改";
      this.optType = true;
      this.showPanel = true;
    },
    ruleAdd() {
      this.model.edit.dat = this.nowDate;

      this.isDetail = false;
      this.opttitle = "公告新增";
      this.optType = true;
      this.showPanel = true;
    },
    ruleDel(idx) {
      this.stmData.data.splice(idx, 1);
    },
    changeMod() {
      let i = 0;
      for (i = 0; i < this.select01.length; i++) {
        if (this.select01[i].value == this.model.edit.mod) {
          this.indexNum = i;
          break;
        }
      }
      this.select02 = this.select01[this.indexNum].obj;
    },
    chooseField() {
      this.model.edit.ruleInfo =
        this.model.edit.ruleInfo +
        "{" +
        this.model.edit.mod +
        this.model.edit.field +
        "}";
    },
    submitData() {
      const length = this.stmData.data.length;
      let btnStr = this.stmData.data;
      let str;
      if (this.model.edit.index == "") {
        //新增
        let max = 0;
        for (let i = 0; i < length; i++) {
          //获取数组中每行的数据
          let arr = btnStr[i];
          if (arr[0] > max) {
            max = arr[0];
          }
        }
        max++;
        var newObj={"edit.theme":this.model.edit.theme,"edit.unit":this.model.edit.unit,
        "edit.pubname":this.model.edit.pubname,"edit. dat":this.model.edit. dat,"edit. content":this.model.edit. content,}
        
        // str = max +'\t' + this.model.edit.theme + '\t' + this.model.edit.unit + '\t' + this.model.edit.dat + '\t'+ +  'mbf'; 
       
        //this.stmData.data.splice(length,0,newObj);
        this.stmData.data.push(newObj);
        console.log(this.stmData.data);
      }
      // else{  //修改
      //   let num = 0;
      //   for(let i=0;  i < length; i++){
      //     //获取数组中每行的数据
      //     let arr = btnStr[i].split("\t");
      //     if(arr[0] == this.model.edit.index ) {
      //       str = arr[0]+'\t' + this.model.edit.ruleDesc + '\t' + this.model.edit.ruleInfo + '\t' + arr[3] + '\t' +  arr[4];
      //       num = i;
      //       break;
      //     }
      //   }
      //   this.stmData.data.splice(num,1,str);
      // }
      // this.$store.commit('setCheckRuleData', this.stmData.data)
      this.model.edit.theme = "";
      this.model.edit.unit = "";
      this.model.edit.pubname = "";
      this.model.edit.dat = "";
      this.model.edit.content = "";
      this.model.edit.index = "";
      this.showPanel = false;
    },
    cancel() {
      this.model.edit.theme = "";
      this.model.edit.unit = "";
      this.model.edit.pubname = "";
      this.model.edit.dat = "";
      this.model.edit.content = "";
      this.model.edit.index = "";
      this.showPanel = false;
    },
    handleReset() {
      this.model.theme='';
      this.model.opndatto = '';
      this.model.opndatfrom='';
      this.model.unit='';   
    },
    handleSearch(){
       noticeQuery({
          "theme":this.model.theme,
          "opndatfrom":this.model.opndatfrom,
          "opndatto":this.model.opndatto,
          "unit":this.model.unit  
        }).then(res=>{
           this.stmData.data=res
        })
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
      console.log(this.pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
      console.log(this.currentPage); //点击第几页
    },
  },
  created: function () {
    //  this.stmData.data = this.$store.state.Status.checkRuleData;
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let day = date.getDate();
    this.nowDate = year + '-' + month + '-' + day;
    // this.model.opndatfrom = this.nowDate;
    // this.model.opndatto = this.nowDate;
    my().then(res => {
         
          this.stmData.data=res
          
      })
  },
};
</script>
<style>
.el-dialog__body {
  padding: 10px 5px 50px;
}
.m-table-search-form {
  position: flex;
  flex-direction: row;
}
.m-table-search-form .el-form-item__content {
  width: calc(100% - 110px);
}

</style>