vue-insagent-pc/src/views/Sys/Post/Index.vue

<template>
  <!--布局容器-->
  <div class="container" style="width: 99%; margin-top: 0px">
    <templateTable
      :formList="formList"
      :searchData.sync="searchData"
      :tableConfig="tableConfig"
      :data="tableData"
      @getList="getList"
      :btnGroup="btnGroup"
      @handleSearchList="handleSearchList"
      :pagination="queryFrom"
    >
      <!-- <template slot="operate" slot-scope="scope">
        <el-button
              size="mini"
              type="primary"
              @click="modifyFun(scope.row)"
        >修改</el-button>
        <el-button size="mini" type="primary" @click="deleteFun(scope.row)">删除</el-button>
      </template> -->
    </templateTable>
    <el-dialog
      v-dialogDrag
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="1200px"
      @close="closeVisible"
    >
      <div>
        <el-form :model="formData" label-width="180px" :rules="rules" ref="formData"  :disabled="disabled">
          <el-row>
            <el-col :span="8">
              <el-form-item label="岗位名称:" prop="postName">
                <el-input clearable size="small" placeholder="请输入岗位名称" v-model="formData.postName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="岗位编码:" prop="postCode">
                <el-input clearable size="small" placeholder="请输入岗位编码" v-model="formData.postCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="显示顺序:" prop="postSort">
                <el-input-number  size="small"  v-model="formData.postSort" :min="1" :max="9999" ></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="状态" prop="status">
                <el-select v-model="formData.status" placeholder="请选择状态" size="small" >
                    <el-option
                    v-for="item in [{value: '0',
                                     label: '正常'},
                                     {value: '1',
                                     label: '停用'}]"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="备注:" prop="remark">
                <el-input clearable size="small" placeholder="请输入备注" v-model="formData.remark"></el-input>
              </el-form-item>
            </el-col>
         
          </el-row>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="comfirmDialog">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
  <script>
import templateTable from "../../../components/TemplateTable/index.vue";

export default {
  name: "post",
  components: { templateTable },
 
  data() {
    return {
      formList: [
        {
          label: "岗位名称",
          prop: "postName",
          type: "input",
        },
        {
          label: "状态",
          prop: "status",
          type: "select",
          options: [
            {
              value: "1",
              label: "停用"
            },
            {
              value: "0",
              label: "正常"
            }
          ]
        }
      ],
      btnGroup:[
        {
            name:'新增',
            click:() => {return this.add()},
        }
      ],
      searchData: {},
      tableConfig: {
        columns: [
          {
            prop: "postCode",
            label: "岗位编码",
            type: "text"
          },
          {
            prop: "postName",
            label: "岗位名称",
            type: "text"
          },
          {
            prop: "status",
            label: "状态",
            type: "text"
          },
          {
            prop: "postSort",
            label: "显示顺序",
            type: "text"
          },
          {
            prop: "remark",
            label: "备注",
            type: "text"
          },
          {
            prop: "createBy",
            label: "创建者",
            type: "text"
          },
          {
            prop: "createTime",
            label: "创建日期",
            type: "text"
          },
          {
            prop: "updateBy",
            label: "更新者",
            type: "text"
          },
          {
            prop: "updateTime",
            label: "更新日期",
            type: "text"
          },
        ],
        loading: true,
        isPaginationShow: true,
        // operationWidth:'200',
        optBtns:[
        {
            type:'text',
            label:'查看',
            click:(row, index) => {return this.detailFun(row)},
          },
          {
            type:'text',
            label:'修改',
            click:(row, index) => {return this.modifyFun(row)},
          },
          {
            type:'text',
            label:'删除',
            click:(row, index) => {return this.deleteFun(row)},
          },
        ]
      },
      queryFrom: {
        pageNum: 1,
        pageSize: 10,
        totalSize: 0
      },
      tableData: [],
      loading: false,
      formData: {},
      dialogTitle:'新增',
      dialogVisible: false,
      rules: {
        postName: [
            { required: true, message: '请输入岗位名称', trigger: 'blur' }
          ],
          postCode: [
            { required: true, message: '请输入岗位编码', trigger: 'blur' }
          ],
          status: [
            { required: true, message: '请选择状态', trigger: 'blur' }
          ],
          postSort: [
            { required: true, message: '请输入显示顺序', trigger: 'blur'  }
          ], 
          remark: [
            { required: true, message: '请输入备注', trigger: 'blur'  }
          ], 
      },
      disabled:false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 查询
    handleSearchList(data) {
      this.getList(data);
    },
    //列表数据
    getList(data) {
      this.tableConfig.loading = true;
      this.$api.role
        .postPage({ ...data, ...this.queryFrom })
        .then(res => {
          if (res.data) {
            res.data.content.forEach(element => {
                element.status= element.status =='1'?'停用':'正常'
            });
            this.tableData = res.data.content;
            this.queryFrom.pageNum = res.data.pageNum;
            this.queryFrom.pageSize = res.data.pageSize;
            this.queryFrom.totalSize = res.data.totalSize;
            this.tableConfig.loading = false;
          } else {
            this.tableConfig.loading = false;
          }
        });
    },
    // 删除
    deleteFun(row) {
      this.$confirm("是否确认删除？")
        .then(() => {
          this.$api.role.postDelete(row.postId).then(res => {
            if (res.code == 200) {
              this.$message({
                message: "删除成功",
                type: "success"
              });
              this.getList();
            }
            else{
                this.$message.error(res.msg)
            }
          });
        })
        .catch(() => {});
    },
    add(){
        this.dialogTitle='新增'
        this.dialogVisible=true
        this.disabled=false
        this.formData={}
    },
    detailFun(row){
        this.dialogTitle='查看'
        this.disabled=true
        this.viewFun(row)
    },
    viewFun(row){
        this.dialogVisible=true
        this.$api.role.postView(row.postId).then(res=>{
        if (res.code == 200) {
            this.formData=res.data
        }
        else{
            this.$message.error(res.msg)
        }
      })
    },
    // 保存页面
    comfirmDialog() {
        this.$refs.formData.validate((valid) => {
          if (valid) {
            if(this.dialogTitle=='新增'){
                this.$api.role.postAdd(this.formData).then(res=>{
                if (res.code == 200) {
                    this.$message({
                    message: this.dialogTitle+'成功',
                    type: "success"
                    });
                    this.dialogVisible = false;
                    this.getList();
                }
                else{
                    this.$message.error(res.msg)
                }
            })
            }
            else{
                let id=this.formData.postId
                this.$api.role.postUpdata(id,this.formData).then(res=>{
                if (res.code == 200) {
                    this.$message({
                    message: this.dialogTitle+'成功',
                    type: "success"
                    });
                    this.dialogVisible = false;
                    this.getList();
                }
                else{
                    this.$message.error(res.msg)
                }
            })
            }
           
          } else {
            return false;
          }
        });
    },
    // 修改页面
    modifyFun(row) {
      this.dialogTitle='修改'
      this.disabled=false
      this.viewFun(row)
    },
    closeVisible() {
      this.dialogVisible = false;
    },
    tablePageChange(val) {
      this.queryFrom.pageSize = val;
      this.getList();
    },
    tableCurrentChange(val) {
      this.queryFrom.pageNum = val;
      this.getList();
    }
  }
};
</script>
    
  <style scoped>
</style>