格式代码添加标准

src/views/iosBasicData/bbusinesstype/index.vue

@@ -1,34 +1,35 @@
 <template>
   <basic-container>
-    <avue-crud :option="option"
-               :table-loading="loading"
-               :data="data"
-               :page.sync="page"
-               :permission="permissionList"
-               id="out-table"
-               :header-cell-class-name="headerClassName"
-               :before-open="beforeOpen"
-               v-model="form"
-               ref="crud"
-               @row-update="rowUpdate"
-               @row-save="rowSave"
-               @row-del="rowDel"
-               @search-change="searchChange"
-               @search-reset="searchReset"
-               @selection-change="selectionChange"
-               @current-change="currentChange"
-               @size-change="sizeChange"
-               @refresh-change="refreshChange"
-               @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 306)"
-               @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 306)"
-               @on-load="onLoad">
+    <avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" :permission="permissionList"
+      id="out-table" :header-cell-class-name="headerClassName" :before-open="beforeOpen" v-model="form" ref="crud"
+      @row-update="rowUpdate" @row-save="rowSave" @row-del="rowDel" @search-change="searchChange"
+      @search-reset="searchReset" @selection-change="selectionChange" @current-change="currentChange"
+      @size-change="sizeChange" @refresh-change="refreshChange"
+      @resetColumn="resetColumnTwo('crud', 'option', 'optionBack', 306)"
+      @saveColumn="saveColumnTwo('crud', 'option', 'optionBack', 306)" @on-load="onLoad">
+      <template slot="code" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.code" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
+      <template slot="cnName" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.cnName" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
+      <template slot="enName" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.enName" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
+      <template slot="remarks" slot-scope="scope">
+        <avue-text-ellipsis :text="scope.row.remarks" :height="30" use-tooltip placement="top">
+          <small slot="more">...</small>
+        </avue-text-ellipsis>
+      </template>
       <template slot="menuLeft">
-        <el-button type="danger"
-                   size="small"
-                   icon="el-icon-delete"
-                   plain
-                   v-if="permission.bbusinesstype_delete"
-                   @click="handleDelete">删 除
+        <el-button type="danger" size="small" icon="el-icon-delete" plain v-if="permission.bbusinesstype_delete"
+          @click="handleDelete">删 除
         </el-button>
       </template>
     </avue-crud>
@@ -36,219 +37,223 @@
 </template>
 
 <script>
-  import {bbusinesstypeList, bbusinesstypeDetail, bbusinesstypeSubmit, bbusinesstypeRemove} from "@/api/iosBasicData/bbusinesstype";
-  import {mapGetters} from "vuex";
+import { bbusinesstypeList, bbusinesstypeDetail, bbusinesstypeSubmit, bbusinesstypeRemove } from "@/api/iosBasicData/bbusinesstype";
+import { mapGetters } from "vuex";
 
-  export default {
-    data() {
+export default {
+  data() {
+    return {
+      form: {},
+      query: {},
+      loading: true,
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0
+      },
+      selectionList: [],
+      option: {},
+      optionBack: {
+        addBtnText: '新建业务类型',
+        addTitle: '新建业务类型',
+        editBtnText: '编辑',
+        editTitle: '编辑业务类型',
+        viewBtnText: '查看',
+        viewTitle: '查看业务类型',
+        height: 'auto',
+        calcHeight: 30,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: true,
+        viewBtn: true,
+        selection: true,
+        dialogClickModal: false,
+        column: [
+          {
+            label: "编码",
+            prop: "code",
+            width: "180",
+            search: true,
+            rules: [{
+              required: true,
+              message: "请输入编码",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "中文名称",
+            prop: "cnName",
+            width: "180",
+            search: true,
+            rules: [{
+              required: true,
+              message: "请输入中文名称",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "英文名称",
+            prop: "enName",
+            width: "180",
+            search: true,
+            rules: [{
+              required: true,
+              message: "请输入英文名称",
+              trigger: "blur"
+            }]
+          },
+          {
+            label: "单据号码格式",
+            prop: "billNoFormat",
+            // rules: [{
+            //   required: true,
+            //   message: "请输入单据号码格式，BL[B][Y4][M2][D2][N6]",
+            //   trigger: "blur"
+            // }]
+          },
+          {
+            label: "版本",
+            prop: "version",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "状态",
+            prop: "status",
+            type: 'select',
+            dicData: [{
+              label: '启用',
+              value: 0
+            }, {
+              label: '停用',
+              value: 1
+            }],
+            value: 0
+          },
+          {
+            label: "是否已删除（0 否 1是）",
+            prop: "isDeleted",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "主键",
+            prop: "id",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "创建人 Id",
+            prop: "createUser",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "创建人",
+            prop: "createUserName",
+            display: false,
+          },
+          {
+            label: "创建部门 Id",
+            prop: "createDept",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "创建部门",
+            prop: "createDeptName",
+            display: false,
+          },
+          {
+            label: "创建时间",
+            prop: "createTime",
+            width: 160,
+            display: false,
+          },
+          {
+            label: "修改人 Id",
+            prop: "updateUser",
+            hide: true,
+            display: false,
+          },
+          {
+            label: "修改人",
+            prop: "updateUserName",
+            width: 160,
+            display: false,
+          },
+          {
+            label: "修改时间",
+            prop: "updateTime",
+            width: 160,
+            display: false,
+          },
+          {
+            label: "备注",
+            prop: "remarks",
+            span: 24,
+            type: 'textarea',
+            width: "180",
+            slot: true,
+            minRows: 3,
+          },
+        ]
+      },
+      data: []
+    };
+  },
+  computed: {
+    ...mapGetters(["permission"]),
+    permissionList() {
       return {
-        form: {},
-        query: {},
-        loading: true,
-        page: {
-          pageSize: 10,
-          currentPage: 1,
-          total: 0
-        },
-        selectionList: [],
-        option:{},
-        optionBack: {
-          addBtnText:'新建业务类型',
-          addTitle:'新建业务类型',
-          editBtnText:'编辑',
-          editTitle:'编辑业务类型',
-          viewBtnText:'查看',
-          viewTitle:'查看业务类型',
-          height:'auto',
-          calcHeight: 30,
-          tip: false,
-          searchShow: true,
-          searchMenuSpan: 6,
-          border: true,
-          index: true,
-          viewBtn: true,
-          selection: true,
-          dialogClickModal: false,
-          column: [
-            {
-              label: "代码",
-              prop: "code",
-                search: true,
-              rules: [{
-                required: true,
-                message: "请输入代码",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "中文名称",
-              prop: "cnName",
-                search: true,
-              rules: [{
-                required: true,
-                message: "请输入中文名称",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "英文名称",
-              prop: "enName",
-                search: true,
-              rules: [{
-                required: true,
-                message: "请输入英文名称",
-                trigger: "blur"
-              }]
-            },
-            {
-              label: "单据号码格式",
-              prop: "billNoFormat",
-              // rules: [{
-              //   required: true,
-              //   message: "请输入单据号码格式，BL[B][Y4][M2][D2][N6]",
-              //   trigger: "blur"
-              // }]
-            },
-            {
-              label: "版本",
-              prop: "version",
-                hide: true,
-                display: false,
-            },
-            {
-              label: "状态",
-              prop: "status",
-                type:'select',
-                dicData: [{
-                    label: '启用',
-                    value: 0
-                }, {
-                    label: '停用',
-                    value: 1
-                }],
-              value:0
-            },
-            {
-              label: "是否已删除（0 否 1是）",
-              prop: "isDeleted",
-                hide: true,
-                display: false,
-            },
-              {
-                  label: "主键",
-                  prop: "id",
-                  hide: true,
-                  display: false,
-              },
-              {
-                  label: "创建人 Id",
-                  prop: "createUser",
-                  hide: true,
-                  display: false,
-              },
-              {
-                  label: "创建人",
-                  prop: "createUserName",
-                  display: false,
-              },
-              {
-                  label: "创建部门 Id",
-                  prop: "createDept",
-                  hide: true,
-                  display: false,
-              },
-              {
-                  label: "创建部门",
-                  prop: "createDeptName",
-                  display: false,
-              },
-              {
-                  label: "创建时间",
-                  prop: "createTime",
-                  width:160,
-                  display: false,
-              },
-              {
-                  label: "修改人 Id",
-                  prop: "updateUser",
-                  hide: true,
-                  display: false,
-              },
-              {
-                  label: "修改人",
-                  prop: "updateUserName",
-                  width: 160,
-                  display: false,
-              },
-              {
-                  label: "修改时间",
-                  prop: "updateTime",
-                  width: 160,
-                  display: false,
-              },
-            {
-              label: "备注",
-              prop: "remarks",
-                span: 24,
-                type: 'textarea',
-                width: "180",
-                slot: true,
-                minRows: 3,
-            },
-          ]
-        },
-        data: []
+        // addBtn: this.vaildData(this.permission.bbusinesstype_add, false),
+        // viewBtn: this.vaildData(this.permission.bbusinesstype_view, false),
+        // delBtn: this.vaildData(this.permission.bbusinesstype_delete, false),
+        // editBtn: this.vaildData(this.permission.bbusinesstype_edit, false)
       };
     },
-    computed: {
-      ...mapGetters(["permission"]),
-      permissionList() {
-        return {
-          // addBtn: this.vaildData(this.permission.bbusinesstype_add, false),
-          // viewBtn: this.vaildData(this.permission.bbusinesstype_view, false),
-          // delBtn: this.vaildData(this.permission.bbusinesstype_delete, false),
-          // editBtn: this.vaildData(this.permission.bbusinesstype_edit, false)
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    }
+  },
+  async created() {
+    this.option = await this.getColumnData(this.getColumnName(306), this.optionBack);
+  },
+  methods: {
+    rowSave(row, done, loading) {
+      bbusinesstypeSubmit(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
         });
-        return ids.join(",");
-      }
+        done();
+      }, error => {
+        loading();
+        window.console.log(error);
+      });
     },
-      async created() {
-          this.option = await this.getColumnData(this.getColumnName(306), this.optionBack);
-      },
-      methods: {
-      rowSave(row, done, loading) {
-        bbusinesstypeSubmit(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          window.console.log(error);
-        });
-      },
-      rowUpdate(row, index, done, loading) {
-        bbusinesstypeSubmit(row).then(() => {
-          this.onLoad(this.page);
-          this.$message({
-            type: "success",
-            message: "操作成功!"
-          });
-          done();
-        }, error => {
-          loading();
-          console.log(error);
+    rowUpdate(row, index, done, loading) {
+      bbusinesstypeSubmit(row).then(() => {
+        this.onLoad(this.page);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
         });
-      },
-      rowDel(row) {
+        done();
+      }, error => {
+        loading();
+        console.log(error);
+      });
+    },
+    rowDel(row) {
+      if (row.status === 1) {
         this.$confirm("确定将选择数据删除?", {
           confirmButtonText: "确定",
           cancelButtonText: "取消",
@@ -264,119 +269,133 @@
               message: "操作成功!"
             });
           });
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
+      } else {
+        this.$message({
+          message: '非禁用状态无法删除',
+          type: 'warning'
+        });
+      }
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+
+      for (const selection of this.selectionList) {
+        if (selection.status == 0) {
+          this.$message.warning("选中的数据中有启用数据,启用数据不可删除!");
           return;
         }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return bbusinesstypeRemove(this.ids);
         })
-          .then(() => {
-            return bbusinesstypeRemove(this.ids);
-          })
-          .then(() => {
-            this.onLoad(this.page);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-          });
-      },
-      beforeOpen(done, type) {
-        if (["edit", "view"].includes(type)) {
-          bbusinesstypeDetail(this.form.id).then(res => {
-            this.form = res.data.data;
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
           });
-        }
-        done();
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoad(this.page);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.page.currentPage = 1;
-        this.onLoad(this.page, params);
-        done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      currentChange(currentPage){
-        this.page.currentPage = currentPage;
-      },
-      sizeChange(pageSize){
-        this.page.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoad(this.page, this.query);
-      },
-      onLoad(page, params = {}) {
-        this.loading = true;
-        bbusinesstypeList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
-          const data = res.data.data;
-          this.page.total = data.total;
-          this.data = data.records;
-          this.loading = false;
-          this.selectionClear();
+          this.$refs.crud.toggleSelection();
         });
-      },
-          //自定义列保存
-          async saveColumnTwo(ref, option, optionBack, code) {
-              /**
-               * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
-               * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
-               * 一定要执行异步操作，要等接口成功返回，才能执行下一行代码
-               */
-              const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
-              if (inSave) {
-                  this.$message.success("保存成功");
-                  //关闭窗口
-                  this.$refs[ref].$refs.dialogColumn.columnBox = false;
-              }
-          },
-          //自定义列重置
-          async resetColumnTwo(ref, option, optionBack, code) {
-              this[option] = this[optionBack];
-              const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
-              if (inSave) {
-                  this.$message.success("重置成功");
-                  this.$refs[ref].$refs.dialogColumn.columnBox = false;
-              }
-          },
-          // 更改表格颜色
-          headerClassName(tab){
-              //颜色间隔
-              let back = ""
-              if (tab.columnIndex >= 0 && tab.column.level === 1) {
-                  if (tab.columnIndex % 2 === 0) {
-                      back = "back-one"
-                  } else if (tab.columnIndex % 2 === 1) {
-                      back = "back-two"
-                  }
-              }
-              return back;
-          },
+    },
+    beforeOpen(done, type) {
+      if (["edit", "view"].includes(type)) {
+        bbusinesstypeDetail(this.form.id).then(res => {
+          this.form = res.data.data;
+        });
+      }
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      bbusinesstypeList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
+        const data = res.data.data;
+        this.page.total = data.total;
+        this.data = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
+    },
+    //自定义列保存
+    async saveColumnTwo(ref, option, optionBack, code) {
+      /**
+       * 已定义全局方法，直接使用，saveColumnData保存列数据方法,参数传值(表格名称，当前表格的option数据)
+       * 已定义全局方法，直接使用，getColumnName方法用来获取枚举值，参数根据自己定义的code值获取中文名
+       * 一定要执行异步操作，要等接口成功返回，才能执行下一行编码
+       */
+      const inSave = await this.saveColumnData(this.getColumnName(code), this[option]);
+      if (inSave) {
+        this.$message.success("保存成功");
+        //关闭窗口
+        this.$refs[ref].$refs.dialogColumn.columnBox = false;
+      }
+    },
+    //自定义列重置
+    async resetColumnTwo(ref, option, optionBack, code) {
+      this[option] = this[optionBack];
+      const inSave = await this.delColumnData(this.getColumnName(code), this[optionBack]);
+      if (inSave) {
+        this.$message.success("重置成功");
+        this.$refs[ref].$refs.dialogColumn.columnBox = false;
+      }
+    },
+    // 更改表格颜色
+    headerClassName(tab) {
+      //颜色间隔
+      let back = ""
+      if (tab.columnIndex >= 0 && tab.column.level === 1) {
+        if (tab.columnIndex % 2 === 0) {
+          back = "back-one"
+        } else if (tab.columnIndex % 2 === 1) {
+          back = "back-two"
+        }
+      }
+      return back;
+    },
 
-    }
-  };
+  }
+};
 </script>
 
 <style scoped>
 ::v-deep#out-table .back-one {
-    background: #ecf5ff !important;
+  background: #ecf5ff !important;
 }
+
 ::v-deep#out-table .back-two {
-    background: #ecf5ff !important;
+  background: #ecf5ff !important;
 }
 </style>