123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338 |
- <template>
- <basic-container>
- <avue-crud
- :data="data"
- ref="crud"
- :option="option"
- @resetColumn="resetColumn"
- @saveColumn="saveColumn"
- >
- <template slot="menuLeft">
- <el-button
- type="primary"
- size="small"
- icon="el-icon-edit"
- @click="addDetail"
- :disabled="disabled"
- >上传
- </el-button>
- </template>
- <template slot="url" slot-scope="{ row }">
- <el-input
- placeholder="请输入内容"
- size="small"
- v-if="row.$cellEdit"
- v-model="row.url"
- class="input-with-select"
- >
- <el-button slot="append" @click="singleLineUpload(row)"
- >附件</el-button
- >
- </el-input>
- <span v-else>{{ row.url }}</span>
- </template>
- <template slot-scope="scope" slot="menu">
- <el-button
- icon="el-icon-download"
- :size="scope.size"
- :type="scope.type"
- @click="download(scope)"
- >查看
- </el-button>
- <el-button
- :type="scope.type"
- :size="scope.size"
- icon="el-icon-edit"
- @click.stop="rowCell(scope.row, scope.index)"
- :disabled="disabled"
- >
- {{ scope.row.$cellEdit ? "保存" : "修改" }}
- </el-button>
- <el-button
- :type="scope.type"
- :size="scope.size"
- icon="el-icon-delete"
- @click.stop="rowDel(scope.row, scope.index)"
- :disabled="disabled"
- >删除
- </el-button>
- </template>
- </avue-crud>
- <el-dialog
- title="上传附件"
- append-to-body
- :visible.sync="excelBox"
- width="555px"
- :close-on-click-modal="false"
- v-dialog-drag
- >
- <el-upload
- class="upload-demo"
- drag
- style="text-align: center"
- ref="upload"
- :action="incomingAction ? incomingAction : action"
- :headers="headers"
- :on-success="onSuccess"
- multiple
- >
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
- <div class="el-upload__tip" slot="tip">
- 如上传文件过大,请耐心等待上传成功
- </div>
- </el-upload>
- </el-dialog>
- <el-dialog
- title="修改附件"
- append-to-body
- :visible.sync="excelTwo"
- width="555px"
- :close-on-click-modal="false"
- v-dialog-drag
- >
- <el-upload
- class="upload-demo"
- drag
- style="text-align: center"
- :action="incomingAction ? incomingAction : action"
- :headers="headers"
- :show-file-list="false"
- :on-success="onSuccessTwo"
- >
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
- <div class="el-upload__tip" slot="tip">
- 如上传文件过大,请耐心等待上传成功
- </div>
- </el-upload>
- </el-dialog>
- <el-dialog
- width="80%"
- title="附件"
- :visible.sync="innerVisible"
- :close-on-click-modal="false"
- append-to-body
- >
- <div style="width: 50%;height: 50%;margin: 0 auto">
- <img :src="imgUrl" alt="" style="width: 100%;height: 100%;" />
- </div>
- </el-dialog>
- </basic-container>
- </template>
- <script>
- import { getToken } from "@/util/auth";
- import { sharedDeletion } from "@/api/user";
- import option from "@/views/exportTrade/customerInquiry/config/mainList.json";
- import { gainUser } from "@/api/basicData/customerInquiry";
- import { updateListRemove } from "@/api/uploadFile/upload-file";
- export default {
- name: "index",
- props: {
- data: {
- type: Object
- },
- incomingAction: {
- type: String
- },
- deleteUrl: {
- type: String
- },
- enumerationValue: {
- type: Number
- },
- typeUpload: {
- type: String
- },
- disabled: {
- type: Boolean
- }
- },
- data() {
- return {
- excelBox: false,
- excelTwo: false,
- innerVisible: false,
- form: {},
- imgUrl: "",
- action: "/api/blade-resource/oss/endpoint/put-file",
- headers: { "Blade-Auth": "Bearer " + getToken() },
- option: {},
- originalOptions: {
- dialogDrag: true,
- index: true,
- refreshBtn: false,
- cellBtn: false,
- cancelBtn: false,
- delBtn: false,
- editBtn: false,
- addBtn: false,
- align: "center",
- column: [
- {
- label: "文件名称",
- prop: "fileName",
- index: 1,
- width: 140,
- cell: true,
- overHidden: true
- },
- {
- label: "文件地址",
- prop: "url",
- index: 2,
- overHidden: true
- },
- {
- type: "select",
- dicUrl: "/api/blade-system/dict-biz/dictionary?code=file_type",
- props: {
- label: "dictValue",
- value: "dictValue"
- },
- label: "文件属性",
- prop: "paymentType",
- search: false,
- index: 3,
- width: 140,
- overHidden: true,
- cell: true
- },
- {
- label: "备注",
- prop: "remarks",
- index: 4,
- cell: true,
- overHidden: true
- }
- ]
- },
- uploadCount: 0
- };
- },
- async created() {
- /**
- * 已定义全局方法,直接使用,getColumnData获取列数据,参数传值(表格名称,引入的本地JSON的数据定义的名称)
- * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
- * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
- */
- this.option = await this.getColumnData(this.getColumnName(this.enumerationValue),this.originalOptions);
- },
- methods: {
- //自定义列保存
- async saveColumn() {
- /**
- * 已定义全局方法,直接使用,saveColumnData保存列数据方法,参数传值(表格名称,当前表格的option数据)
- * 已定义全局方法,直接使用,getColumnName方法用来获取枚举值,参数根据自己定义的code值获取中文名
- * 一定要执行异步操作,要等接口成功返回,才能执行下一行代码
- */
- const inSave = await this.saveColumnData(this.getColumnName(this.enumerationValue),this.option);
- if (inSave) {
- this.$message.success("保存成功");
- //关闭窗口
- this.$refs.crud.$refs.dialogColumn.columnBox = false;
- }
- },
- //自定义列重置
- async resetColumn() {
- this.option = this.originalOptions;
- const inSave = await this.delColumnData(this.getColumnName(this.enumerationValue),this.originalOptions);
- if (inSave) {
- this.$message.success("重置成功");
- this.$refs.crud.$refs.dialogColumn.columnBox = false;
- }
- },
- //新增上传成功
- onSuccess(response, file, fileList) {
- this.$refs.crud.rowCellAdd({
- fileName: response.data.originalName,
- url: response.data.link
- });
- this.uploadCount++;
- if (this.uploadCount === fileList.length) {
- this.$refs.upload.clearFiles();
- this.excelBox = false;
- this.uploadCount = 0;
- }
- },
- //修改上传成功
- onSuccessTwo(response) {
- this.form.fileName = response.data.originalName;
- this.form.url = response.data.link;
- this.data[this.form.$index] = this.form;
- this.excelTwo = false;
- },
- //单行上传
- singleLineUpload(row) {
- this.form = row;
- this.excelTwo = true;
- },
- //开启批量上传
- addDetail() {
- this.excelBox = true;
- },
- //下载附件
- download(scope) {
- console.log(scope.row.url);
- if (scope.row.url) {
- if (
- scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
- ".jpg" ||
- scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
- ".png" ||
- scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
- ".JPG" ||
- scope.row.fileName.substring(scope.row.fileName.lastIndexOf(".")) ===
- ".PNG"
- ) {
- this.imgUrl = scope.row.url;
- this.innerVisible = true;
- } else {
- window.open(scope.row.url);
- }
- } else {
- this.$message.error("请上传附件");
- }
- },
- //修改触发
- rowCell(row, index) {
- if (row.$cellEdit == true) {
- this.$set(row, "$cellEdit", false);
- } else {
- this.$set(row, "$cellEdit", true);
- }
- // this.$refs.crud.rowCell(row, index)
- },
- rowDel(row, index) {
- this.$confirm("确定将选择数据删除?", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning"
- }).then(() => {
- if (row.id) {
- if (this.typeUpload == "CK") {
- updateListRemove(row.id, this.deleteUrl).then(res => {
- if (res.data.success) {
- this.$message.success("操作成功!");
- this.data.splice(index, 1);
- }
- });
- } else {
- sharedDeletion(this.deleteUrl, row.id).then(res => {
- if (res.data.success) {
- this.$message.success("操作成功!");
- this.data.splice(index, 1);
- }
- });
- }
- } else {
- this.data.splice(index, 1);
- }
- });
- }
- }
- };
- </script>
- <style scoped></style>
|