iview-admin 學習 04 列表展示、增刪查改及模態框按鈕修改

dict.vue

<template>
  <div class='table_view'>
    <!-- 頭部查詢 開始 -->
    <Card :bordered='false' class='margin_bottom'>
      <div class='form_cx'>
        <div class='form_cx_item_l'>
          <div class='form_cx_item_block'>
            <span class='form_cx_item_lable'>類型</span>
            <div class='form_cx_item_input'>
              <Input class='form_cx_item_input' v-model='formData.type' placeholder='請輸入類型' />
            </div>
          </div>
        </div>
        <div class='form_cx_item_r'>
          <Button type='primary' icon='ios-search' @click='chaxun'>{{this.GLOBAL.TEXT_SEARCH}}</Button>
          <Button type='success' icon='md-add' @click="add" >{{this.GLOBAL.TEXT_ADD}}</Button>
        </div>
      </div>
    </Card>
    <!-- 頭部查詢 結束 -->
    <Card :bordered='false' class='margin_bottom'>
      <Table  :loading='tableObj.loading' border :columns='columns7' :data='data6'>
        <template slot-scope='{ row, index }' slot='action'>
          <Button type='primary' class="button_right" size='small'  @click='show(index,row)'>{{text_view}}</Button>
          <Button type='primary' class="button_right" size='small'  @click='edit(index,row)'>{{text_edit}}</Button>
          <Button type='error' class="button_right" size='small' @click='remove(index,row)'>{{text_delete}}</Button>
        </template>
      </Table>
      <!-- 分頁 -->
          <div style="margin: 10px;overflow: hidden">
        <div>
            <Page :total="tableObj.total" :current="tableObj.page" :page-size="tableObj.rows" show-sizer @on-change="changePage" ></Page>
        </div>
    </div>
    </Card>
    <!-- 彈窗 -->
    <!--標題dailogTitle ；對象dataForm -->
    <dictAdd v-model="addShow" v-on:getList="getList" :dailogTitle="dailogTitle" :dataForm="dataForm"></dictAdd>

  </div>

</template>
<script>

import { getTableList,delInfo } from '@/api/dict';

import dictAdd from '@/view/standard/dict/dictAdd';

export default {
  name: 'tableView',
  components:{
    dictAdd //新增
  },
  data () {
    // 頁面所有數據儲存對象
    return {
      dailogTitle:'',
      text_view : this.GLOBAL.TEXT_VIEW,
      text_edit : this.GLOBAL.TEXT_EDIT,
      text_delete : this.GLOBAL.TEXT_DELETE,
      dataForm:{},
      addShow : false,
      // 查詢數據
      modelObj: {
        modal1: false
      },
      formData: {},
      tableObj: {
        rows: 15, // 每頁條數
        page: 1, // 頁碼
        total:10, // 總條數
        loading: true
      },
      columns7: [
        {
          title: '類型',
          key: 'type'
        },
        {
          title: '標籤名',
          key: 'label'
        },
        {
          title: '數據值',
          key: 'value'
        },
        {
          title: '描述',
          key: 'description'
        },
        {
          title: '操作',
          slot: 'action',
          // width: 150,
          align: 'center'
        }
      ],
      data6: []
    };
  },
  mounted () {
    // 生命週期 頁面加載完畢
    this.getList(); // 獲取表格數據
  },
  methods: {
    // 所有事件綁定對象
    getList () {
      // 頭部查詢條件對象
      let formData = this.formData||{}

      formData.pageSize=this.tableObj.rows  //條數
      formData.currentPage=this.tableObj.page //頁碼
      console.log("條數:"+this.tableObj.rows)
      console.log("頁碼:"+this.tableObj.page)
    //列表數據加載
     getTableList(formData)
        .then(res => {
          // 獲取的數據 設置到表格對應綁定的數組
          this.data6 = res.data.records || []
          // 設置加載狀態
          this.tableObj.loading = false
          // 設置分頁
          this.tableObj.total=res.data.total;

        })
        .catch(err => {
          this.tableObj.loading = false // 取消表格加載狀態
        })
    },
    add () {//新增
      this.dataForm={};
      this.addShow = true ;
      this.dailogTitle = this.GLOBAL.TEXT_ADD;
    },
    chaxun () { // 查詢事件
       this.getList(); // 獲取表格數據
    },
    show (index,row) {//查看
      this.addShow = true ;
      this.dailogTitle = this.GLOBAL.TEXT_VIEW;
      this.dataForm = row;
    },
    edit(index,row){// 修改
      this.$delete(row,'_index');
      this.$delete(row,'_rowKey');
      this.$delete(row,'createDate');
      this.$delete(row,'updateDate');
      this.dataForm=row;
      this.addShow =true;
      this.dailogTitle = this.GLOBAL.TEXT_EDIT;

    },
    remove (index, row) {
      console.log(row.id)
      this.$Modal.confirm({
          title: this.GLOBAL.MSG_TITLE_TIPS,
          content: '確定刪除該數據？',
          onOk: () => {
              this.delData(row.id); //調用刪除方法
          },
          onCancel: () => {
          }
      })
    },
    delData(id){ // 刪除請求
      delInfo(id)
        .then(res =>{
          let data = res.data;
          if (data.success == true) {
            this.$Message.success(data.msg);
            this.getList()
          } else {
            this.$Message.error(data.msg);
          }
        })
        .catch(err=>{
          this.$Message.error(this.GLOBAL.MSG_FAILED_DEL);
        })

    },
    isShowModel (name) {
      this.modelObj[name] = !this.modelObj[name]
    },
    changePage (item) {// 頁碼變更 觸發
      console.log(item)
      // 修改頁碼 重新加載表格
      this.tableObj.page=item;
      this.getList(); // 獲取表格數據
    }
  }
}
</script>

<style lang='stylus'>
.table_view
  .form_cx
    display flex
    .form_cx_item_l
      display flex
      flex 1
      flex-wrap wrap
      .form_cx_item_block
        display flex
        width 25%
        margin 0 0 15px 0
        padding 0 15px 0 0
        box-sizing boder-box
        .form_cx_item_lable
          height 32px
          line-height 32px
          display inline-block
          padding-right 15px
          box-sizing border-box
        .form_cx_item_input
          flex 1
          .ivu-date-picker
            width 100%
    .form_cx_item_r
      display flex
      button
        height 32px
        margin-right 10px
  .margin_bottom
    margin-bottom 15px
.button_right
  margin-right 10px
</style>

dictAdd.vue

<template>
  <Modal v-model="show" :title="dailogTitle" :loading="loading"
         :mask-closable="false"  width="800">
    <Form ref="dictForm" :model="dataForm" :rules="dictFormRule" :label-width="100">
      <Row>
        <Col span="11">
          <FormItem label="字典類型" prop="type">
            <Input type="text" :maxlength=50 v-model="dataForm.type" placeholder="請輸入字典類型"/>
          </FormItem>
        </Col>
        <Col span="11">
          <FormItem label="字典文本" prop="label">
            <Input type="text" :maxlength=50 v-model="dataForm.label" placeholder="請輸入字典文本"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="11">
          <FormItem label="字典數值" prop="value">
            <Input type="text" :maxlength=50 v-model="dataForm.value" placeholder="請輸入字典數值"/>
          </FormItem>
        </Col>
        <Col span="11">
          <FormItem label="排序" prop="sort">
            <Input type="number" :maxlength=50 v-model="dataForm.sort" placeholder="請輸入字典序號"/>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <FormItem label="描述" prop="description">
          <Input type="textarea" :autosize="{minRows: 3,maxRows: 5}"  style="width: 90%"
                 :maxlength=200 show-word-limit v-model="dataForm.description" placeholder="請輸入字典描述"/>
        </FormItem>
      </Row>
    </Form>
    <div slot="footer">
      <!-- 按鈕顏色
          primary 藍
          dashed、 有邊框白
          text、 無邊框白
          info、 淺藍
          success、 綠
          warning、 橘
          error     紅
          -->
      <span v-if="dailogTitle == dailogView">
        <Button type="dashed" size="large" @click="closeModal()">{{this.GLOBAL.BTN_CLOSE}}</Button>

      </span>
      <span v-else>
        <Button type="dashed" size="large" @click="closeModal()">{{this.GLOBAL.BTN_CANCEL}}</Button>
        <Button type="primary" size="large" @click="ok()">{{this.GLOBAL.BTN_OK}}</Button>
      </span>
    </div>

  </Modal>
</template>

<script>

 import { saveInfo} from '@/api/dict';

  export default {
    name: "dictAdd",
    props: ["dailogTitle", "dataForm", "value"],
  watch: { // 偵聽id 如果有變化則刷新列表
  },
    data() {
      return {
        show: this.value,
        loading: true,
        dailogView : this.GLOBAL.TEXT_VIEW,
        // dictForm : this.dataForm2||{},
        //dictForm:{},
        dictFormRule: {
          type: [
            {required: true, message: '字典類型不能爲空', trigger: 'blur'},
            {type: 'string', max: 50, message: '字典類型不能大於50個字符', trigger: 'blur'}
          ],
          label: [
            {required: true, message: '字典文本不能爲空', trigger: 'blur'},
            {type: 'string', max: 50, message: '字典文本不能大於50個字符', trigger: 'blur'}
          ],
          value: [
            {required: true, message: '字典數值不能爲空', trigger: 'blur'},
            {type: 'string', max: 50, message: '字典數值不能大於50個字符', trigger: 'blur'}
          ],
          sort: [
            {required: true, message: '字典排序不能爲空', trigger: 'blur'}
          ]
        }
      }
    },
    mounted () {
    },
    methods: {
      //確定:保存數據
      ok() {
        setTimeout(() => {
          this.loading = false;
          this.$nextTick(() => {
            this.loading = true;
          });
        }, 1000);
        this.$refs['dictForm'].validate((valid) => {
            debugger
            //數據校驗
          if (valid) {
              //提交表單
            saveInfo(this.dataForm)
              .then(res => {
                let data = res.data;
                if (data.success == true) {
                  this.$Message.success(data.msg);
                  // 提交表單數據成功則關閉當前的modal框
                  this.closeModal(false);
                  // 同時調用父頁面的刷新頁面的方法
                  this.$emit('getList');//子組件可以使用$emit 觸發父組件的自定義事件
                } else {
                  this.$Message.error(data.msg)
                }
              })
          } else {
            this.$Message.error(this.GLOBAL.MSG_FAILED_SAVE);
          }
        });
      },
      //取消：關閉modal
      closeModal(val) {
        if (this.dailogTitle == this.GLOBAL.DAILOG_TITLE_ADD) {
          this.$refs['dictForm'].resetFields();
        }
        this.$emit('input', val);
      }
    },
    watch: {
      value(val) {
        this.show = val;
      },
      show(val) {
        if (!val) {
          //this.$refs['dictForm'].resetFields();//數據置空
          this.closeModal(val);//關閉
        }
      }
    }
  }
</script>