|  | @@ -0,0 +1,291 @@
 | 
	
		
			
				|  |  | +<template>
 | 
	
		
			
				|  |  | +  <div class="app-container">
 | 
	
		
			
				|  |  | +    <div class="main-right-box">
 | 
	
		
			
				|  |  | +      <!--    搜索条件    -->
 | 
	
		
			
				|  |  | +      <div class="main-search-box">
 | 
	
		
			
				|  |  | +        <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" size="small">
 | 
	
		
			
				|  |  | +          <el-form-item label="资料类型" prop="sourceId">
 | 
	
		
			
				|  |  | +            <el-select style="width: 100%" v-model="queryParams.sourceId" placeholder="请选择资料类型">
 | 
	
		
			
				|  |  | +              <el-option
 | 
	
		
			
				|  |  | +                v-for="item in types"
 | 
	
		
			
				|  |  | +                :key="item.id"
 | 
	
		
			
				|  |  | +                :label="item.sourceName"
 | 
	
		
			
				|  |  | +                :value="item.id">
 | 
	
		
			
				|  |  | +              </el-option>
 | 
	
		
			
				|  |  | +            </el-select>
 | 
	
		
			
				|  |  | +          </el-form-item>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        </el-form>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +        <el-row :gutter="10">
 | 
	
		
			
				|  |  | +          <el-col :span="1.5">
 | 
	
		
			
				|  |  | +            <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery"
 | 
	
		
			
				|  |  | +            >搜索
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +          </el-col>
 | 
	
		
			
				|  |  | +          <el-col :span="1.5">
 | 
	
		
			
				|  |  | +            <el-button icon="el-icon-refresh" size="mini" type="primary" @click="resetQuery"
 | 
	
		
			
				|  |  | +            >重置
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +          </el-col>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          <el-col :span="1.5">
 | 
	
		
			
				|  |  | +            <el-button  icon="el-icon-plus" size="mini" type="primary"
 | 
	
		
			
				|  |  | +                       @click="handleAdd">新增
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +          </el-col>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 | 
	
		
			
				|  |  | +        </el-row>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <el-table
 | 
	
		
			
				|  |  | +        v-loading="loading"
 | 
	
		
			
				|  |  | +        :data="typeList"
 | 
	
		
			
				|  |  | +        border
 | 
	
		
			
				|  |  | +        height="646" size="small" >
 | 
	
		
			
				|  |  | +        <el-table-column align="center" label="序号" width="100">
 | 
	
		
			
				|  |  | +          <template v-slot:default="scope">
 | 
	
		
			
				|  |  | +            <span v-text="getPageIndex(scope.$index)"> </span>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column :show-overflow-tooltip="true" label="资料类型" prop="sourceName"/>
 | 
	
		
			
				|  |  | +        <el-table-column :show-overflow-tooltip="true" label="文件名称" prop="fileName"/>
 | 
	
		
			
				|  |  | +        <el-table-column :show-overflow-tooltip="true" label="排序" prop="sort"/>
 | 
	
		
			
				|  |  | +        <el-table-column align="center" label="创建时间" prop="createTime" width="200">
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +        <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
 | 
	
		
			
				|  |  | +          <template v-if="scope.row.id !== 1" slot-scope="scope">
 | 
	
		
			
				|  |  | +            <el-button  icon="el-icon-edit-outline" size="mini" type="text"
 | 
	
		
			
				|  |  | +                       @click="handleUpdate(scope.row)">编辑
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +            <el-button  icon="el-icon-delete" size="mini" type="text"
 | 
	
		
			
				|  |  | +                       @click="handleDelete(scope.row)">删除
 | 
	
		
			
				|  |  | +            </el-button>
 | 
	
		
			
				|  |  | +          </template>
 | 
	
		
			
				|  |  | +        </el-table-column>
 | 
	
		
			
				|  |  | +      </el-table>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <pagination v-show="total > 0" :limit.sync="queryParams.pageSize" :page.sync="queryParams.pageNum" :total="total"
 | 
	
		
			
				|  |  | +                  @pagination="getList"/>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    </div>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    <!-- 添加或修改角色配置对话框 -->
 | 
	
		
			
				|  |  | +    <DialogCom :title="title" :visible.sync="open" append-to-body width="650px">
 | 
	
		
			
				|  |  | +      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
 | 
	
		
			
				|  |  | +        <el-row>
 | 
	
		
			
				|  |  | +          <el-col :span="22">
 | 
	
		
			
				|  |  | +            <el-form-item label="资料类型" prop="sourceName">
 | 
	
		
			
				|  |  | +              <el-select style="width: 100%" v-model="form.sourceId" placeholder="请选择资料类型">
 | 
	
		
			
				|  |  | +                <el-option
 | 
	
		
			
				|  |  | +                  v-for="item in types"
 | 
	
		
			
				|  |  | +                  :key="item.id"
 | 
	
		
			
				|  |  | +                  :label="item.sourceName"
 | 
	
		
			
				|  |  | +                  :value="item.id">
 | 
	
		
			
				|  |  | +                </el-option>
 | 
	
		
			
				|  |  | +              </el-select>
 | 
	
		
			
				|  |  | +            </el-form-item>
 | 
	
		
			
				|  |  | +          </el-col>
 | 
	
		
			
				|  |  | +        </el-row>
 | 
	
		
			
				|  |  | +        <el-row>
 | 
	
		
			
				|  |  | +          <el-col :span="22">
 | 
	
		
			
				|  |  | +            <el-form-item label="上传文件" ref="files" prop="fileList">
 | 
	
		
			
				|  |  | +              <K-file-upload
 | 
	
		
			
				|  |  | +                ref="upload"
 | 
	
		
			
				|  |  | +                :defaultValue="formFileListDefualtValue"
 | 
	
		
			
				|  |  | +                v-model="form.fileList"
 | 
	
		
			
				|  |  | +                :limit="1"
 | 
	
		
			
				|  |  | +                :fileType="['pdf','doc','docx']"
 | 
	
		
			
				|  |  | +                @input="fileListChanged"
 | 
	
		
			
				|  |  | +              />
 | 
	
		
			
				|  |  | +            </el-form-item>
 | 
	
		
			
				|  |  | +          </el-col>
 | 
	
		
			
				|  |  | +        </el-row>
 | 
	
		
			
				|  |  | +        <el-row>
 | 
	
		
			
				|  |  | +          <el-col :span="22">
 | 
	
		
			
				|  |  | +            <el-form-item label="资料排序" prop="sort">
 | 
	
		
			
				|  |  | +              <el-input-number v-model="form.sort"
 | 
	
		
			
				|  |  | +                               :max="1000"
 | 
	
		
			
				|  |  | +                               :min="0" controls-position="right" style="width: 100%"/>
 | 
	
		
			
				|  |  | +            </el-form-item>
 | 
	
		
			
				|  |  | +          </el-col>
 | 
	
		
			
				|  |  | +        </el-row>
 | 
	
		
			
				|  |  | +      </el-form>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +      <div slot="footer" class="dialog-footer">
 | 
	
		
			
				|  |  | +        <el-button type="primary" @click="submitForm">确 定</el-button>
 | 
	
		
			
				|  |  | +        <el-button @click="cancel">取 消</el-button>
 | 
	
		
			
				|  |  | +      </div>
 | 
	
		
			
				|  |  | +    </DialogCom>
 | 
	
		
			
				|  |  | +  </div>
 | 
	
		
			
				|  |  | +</template>
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +<script>
 | 
	
		
			
				|  |  | +import {
 | 
	
		
			
				|  |  | +  listData,delData,addOrEditData,getData,getTypes
 | 
	
		
			
				|  |  | +} from "@/api/system/operating/operating";
 | 
	
		
			
				|  |  | +import KFileUpload from "@/components/K-FileUpload/index.vue";
 | 
	
		
			
				|  |  | +export default {
 | 
	
		
			
				|  |  | +  name: "operatingData",
 | 
	
		
			
				|  |  | +  components: {KFileUpload},
 | 
	
		
			
				|  |  | +  data() {
 | 
	
		
			
				|  |  | +    return {
 | 
	
		
			
				|  |  | +      // 遮罩层
 | 
	
		
			
				|  |  | +      loading: true,
 | 
	
		
			
				|  |  | +      formFileListDefualtValue: [],
 | 
	
		
			
				|  |  | +      // 选中数组
 | 
	
		
			
				|  |  | +      ids: [],
 | 
	
		
			
				|  |  | +      types:[],
 | 
	
		
			
				|  |  | +      // 显示搜索条件
 | 
	
		
			
				|  |  | +      showSearch: true,
 | 
	
		
			
				|  |  | +      // 总条数
 | 
	
		
			
				|  |  | +      total: 0,
 | 
	
		
			
				|  |  | +      // 弹出层标题
 | 
	
		
			
				|  |  | +      title: "",
 | 
	
		
			
				|  |  | +      // 是否显示弹出层
 | 
	
		
			
				|  |  | +      open: false,
 | 
	
		
			
				|  |  | +      typeList:[],
 | 
	
		
			
				|  |  | +      // 查询参数
 | 
	
		
			
				|  |  | +      queryParams: {
 | 
	
		
			
				|  |  | +        pageNum: 1,
 | 
	
		
			
				|  |  | +        pageSize: 10,
 | 
	
		
			
				|  |  | +        sourceId: undefined,
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +      // 表单参数
 | 
	
		
			
				|  |  | +      form: {},
 | 
	
		
			
				|  |  | +      // 表单校验
 | 
	
		
			
				|  |  | +      rules: {
 | 
	
		
			
				|  |  | +        sourceId: [
 | 
	
		
			
				|  |  | +          {required: true, message: "资料分类不能为空", trigger: "blur"}
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +        sort: [
 | 
	
		
			
				|  |  | +          {required: true, message: "排序不能为空", trigger: "blur"}
 | 
	
		
			
				|  |  | +        ],
 | 
	
		
			
				|  |  | +      },
 | 
	
		
			
				|  |  | +    };
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  created() {
 | 
	
		
			
				|  |  | +    this.getList();
 | 
	
		
			
				|  |  | +    this.getTypes();
 | 
	
		
			
				|  |  | +  },
 | 
	
		
			
				|  |  | +  methods: {
 | 
	
		
			
				|  |  | +    fileListChanged(list) {
 | 
	
		
			
				|  |  | +      this.$refs.files.clearValidate();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getPageIndex($index) {
 | 
	
		
			
				|  |  | +      //表格序号
 | 
	
		
			
				|  |  | +      return (this.queryParams.pageNum - 1) * this.queryParams.pageSize + $index + 1
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    getTypes(){
 | 
	
		
			
				|  |  | +      getTypes().then(response => {
 | 
	
		
			
				|  |  | +          this.types = response.data;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      );
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /** 查询角色列表 */
 | 
	
		
			
				|  |  | +    getList() {
 | 
	
		
			
				|  |  | +      this.loading = true;
 | 
	
		
			
				|  |  | +      listData(this.queryParams).then(response => {
 | 
	
		
			
				|  |  | +          this.typeList = response.rows;
 | 
	
		
			
				|  |  | +          this.total = response.total;
 | 
	
		
			
				|  |  | +          this.loading = false;
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      );
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    // 取消按钮
 | 
	
		
			
				|  |  | +    cancel() {
 | 
	
		
			
				|  |  | +      this.open = false;
 | 
	
		
			
				|  |  | +      this.reset();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    // 表单重置
 | 
	
		
			
				|  |  | +    reset() {
 | 
	
		
			
				|  |  | +      if (this.$refs.menu !== undefined) {
 | 
	
		
			
				|  |  | +        this.$refs.menu.setCheckedKeys([]);
 | 
	
		
			
				|  |  | +      }
 | 
	
		
			
				|  |  | +        this.form = {
 | 
	
		
			
				|  |  | +          sourceName: undefined,
 | 
	
		
			
				|  |  | +          sort: 0,
 | 
	
		
			
				|  |  | +        };
 | 
	
		
			
				|  |  | +      this.resetForm("form");
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /** 搜索按钮操作 */
 | 
	
		
			
				|  |  | +    handleQuery() {
 | 
	
		
			
				|  |  | +      this.queryParams.pageNum = 1;
 | 
	
		
			
				|  |  | +      this.getList();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /** 重置按钮操作 */
 | 
	
		
			
				|  |  | +    resetQuery() {
 | 
	
		
			
				|  |  | +      this.dateRange = [];
 | 
	
		
			
				|  |  | +      this.resetForm("queryForm");
 | 
	
		
			
				|  |  | +      this.handleQuery();
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +
 | 
	
		
			
				|  |  | +    /** 新增按钮操作 */
 | 
	
		
			
				|  |  | +    handleAdd() {
 | 
	
		
			
				|  |  | +      this.reset();
 | 
	
		
			
				|  |  | +      this.open = true;
 | 
	
		
			
				|  |  | +      this.title = "新增操作手册";
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /** 修改按钮操作 */
 | 
	
		
			
				|  |  | +    handleUpdate(row) {
 | 
	
		
			
				|  |  | +      this.reset();
 | 
	
		
			
				|  |  | +      const id = row.id || this.ids
 | 
	
		
			
				|  |  | +      getData(id).then(response => {
 | 
	
		
			
				|  |  | +        this.form = response.data;
 | 
	
		
			
				|  |  | +        let file = {url:this.form.fileUrl,name:this.form.fileName};
 | 
	
		
			
				|  |  | +        let fileList = [];
 | 
	
		
			
				|  |  | +        fileList.push(JSON.stringify(file));
 | 
	
		
			
				|  |  | +        this.form.fileList = fileList;
 | 
	
		
			
				|  |  | +        this.formFileListDefualtValue = fileList;
 | 
	
		
			
				|  |  | +        this.open = true;
 | 
	
		
			
				|  |  | +        this.title = "编辑操作手册";
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /** 提交按钮 */
 | 
	
		
			
				|  |  | +    submitForm: function () {
 | 
	
		
			
				|  |  | +      this.$refs["form"].validate(valid => {
 | 
	
		
			
				|  |  | +        console.log(this.form)
 | 
	
		
			
				|  |  | +        console.log(this.form.fileList)
 | 
	
		
			
				|  |  | +        if(this.form.fileList.length === 0){
 | 
	
		
			
				|  |  | +          this.$modal.msgError("请上传文件!");
 | 
	
		
			
				|  |  | +          throw new Error("请上传文件!");
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +        if (valid) {
 | 
	
		
			
				|  |  | +          let file = JSON.parse(this.form.fileList[0]);
 | 
	
		
			
				|  |  | +          this.form.fileUrl = file.url;
 | 
	
		
			
				|  |  | +          this.form.fileName = file.name;
 | 
	
		
			
				|  |  | +          if (this.form.id !== undefined) {
 | 
	
		
			
				|  |  | +            addOrEditData(this.form).then(response => {
 | 
	
		
			
				|  |  | +              this.$modal.msgSuccess("处理成功");
 | 
	
		
			
				|  |  | +              this.open = false;
 | 
	
		
			
				|  |  | +              this.getList();
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +          } else {
 | 
	
		
			
				|  |  | +            console.log(this.form);
 | 
	
		
			
				|  |  | +            addOrEditData(this.form).then(response => {
 | 
	
		
			
				|  |  | +              this.$modal.msgSuccess("处理成功");
 | 
	
		
			
				|  |  | +              this.open = false;
 | 
	
		
			
				|  |  | +              this.getList();
 | 
	
		
			
				|  |  | +            });
 | 
	
		
			
				|  |  | +          }
 | 
	
		
			
				|  |  | +        }
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +    /** 删除按钮操作 */
 | 
	
		
			
				|  |  | +    handleDelete(row) {
 | 
	
		
			
				|  |  | +      const id = row.id || this.ids;
 | 
	
		
			
				|  |  | +      this.$modal.confirm('确认要删除"' + row.sourceName + '"吗?').then(function () {
 | 
	
		
			
				|  |  | +        return delData(id);
 | 
	
		
			
				|  |  | +      }).then(() => {
 | 
	
		
			
				|  |  | +        this.getList();
 | 
	
		
			
				|  |  | +        this.$modal.msgSuccess("删除成功");
 | 
	
		
			
				|  |  | +      }).catch(() => {
 | 
	
		
			
				|  |  | +      });
 | 
	
		
			
				|  |  | +    },
 | 
	
		
			
				|  |  | +  }
 | 
	
		
			
				|  |  | +};
 | 
	
		
			
				|  |  | +</script>
 |