msyj-admin-org/src/modules/client-set/ClientParamSet.vue

<template>
  <div class="client-param-set">
    <Row :gutter="20" type="flex">
      <Col span="12">
        <div class="part-box">
          <h2 class="client-param-title">科目名称设置</h2>
          <Button type="success" icon="md-add" @click="toAdd">新增</Button>
          <Table
            ref="TableList"
            :columns="columes"
            :data="subjects"
            border
          ></Table></div
      ></Col>
      <Col span="12">
        <div class=" part-box">
          <h2 class="client-param-title">其他设置</h2>
          <Form ref="modalFormComp" :model="modalForm" :label-width="100">
            <FormItem prop="name">
              <Checkbox v-model="modalForm.isScanPackage"
                >是否整包扫描</Checkbox
              >
            </FormItem>
            <FormItem prop="name">
              <Checkbox v-model="modalForm.isImageEncryption"
                >图片是否加密</Checkbox
              >
            </FormItem>
            <FormItem prop="imageNameRule" label="图片命名规则">
              <Select
                v-model="modalForm.imageNameRule"
                placeholder="请选择图片命名规则"
              >
                <Option value=""></Option>
              </Select>
            </FormItem>
            <FormItem prop="paperGrading" label="试卷档位">
              <Select
                v-model="modalForm.imageNameRule"
                placeholder="请选择试卷档位"
              >
                <Option value=""></Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button type="primary" @click="toSubmit">保存</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
import { subjectList, uploadSubject, deleteSubject } from "@/api";

const initSubject = {
  id: "",
  subjectName: "",
  subjectCode: "",
  password: ""
};

export default {
  name: "client-param-set",
  data() {
    return {
      subjects: [],
      columes: [
        {
          type: "index",
          title: "序号",
          width: 60,
          align: "center"
        },
        {
          title: "科目名称",
          key: "subjectName",
          render: (h, param) => {
            return h("Input", {
              props: {
                value: param.row.subjectName,
                clearable: true
              },
              style: {
                width: "120px"
              },
              on: {
                input: function(value) {
                  param.row.subjectName = value;
                }
              }
            });
          }
        },
        {
          title: "科目代码",
          key: "subjectCode",
          render: (h, param) => {
            return h("Input", {
              props: {
                value: param.row.subjectCode,
                clearable: true
              },
              style: {
                width: "120px"
              },
              on: {
                input: function(value) {
                  param.row.subjectCode = value;
                }
              }
            });
          }
        },
        {
          title: "操作",
          key: "action",
          width: 120,
          align: "center",
          render: (h, param) => {
            let actions = [
              {
                name: "保存",
                action: () => {
                  this.toSave(param.row);
                }
              },
              {
                name: "删除",
                type: "error",
                action: () => {
                  this.toDelete(param.row);
                }
              }
            ];
            return h("div", this.$tableAction(h, actions));
          }
        }
      ],
      // other param
      modalForm: {
        isScanPackage: false,
        isImageEncryption: false,
        imageNameRule: "",
        paperGrading: ""
      }
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      const datas = {
        workId: this.workId
      };
      const data = await subjectList(datas);

      console.log(data);

      if (!this.subjects.length) this.toAdd();
    },
    toAdd() {
      this.subjects.push({ ...initSubject });
    },
    async toSave(row) {
      if (!row.subjectName || row.subjectName.length > 20) {
        this.$Message.error("必须输入科目名称，且科目名称长度不能超过20个字符");
        return;
      }
      if (!row.subjectCode.match(new RegExp(`^[a-zA-Z0-9_]{3,20}$`))) {
        this.$Message.error(
          "当前科目代码只能由数字、字母和下划线组成，长度2-20个字符"
        );
        return;
      }
      await uploadSubject(row);
      this.$Message.success("保存成功！");
      this.getList();
    },
    toDelete(row) {
      if (!row.id) {
        // TODO:
        return;
      }
      this.$Modal.confirm({
        title: "删除警告",
        content: "确定要删除当前科目吗？",
        onOk: () => {
          this.toDel(row.id);
        }
      });
    },
    async toDel(id) {
      await deleteSubject(id);
      this.$Message.success("删除成功！");
      this.getList();
    },
    toSubmit() {}
  }
};
</script>