ouchen/src/views/salesOrder/list.vue

<template>
  <div>
    <TopTitle title="销售订单">
      <Button type="primary" @click="searchModal = true">查找</Button>
      <Button type="primary" @click="showModalTrue()" style="margin-left: 20px"
        >栏目设置</Button
      >
    </TopTitle>
    <div class="content">
      <Table
        :data="tableData"
        :columns="tableColumns"
        border
        max-height="700"
        v-show="tableData.length != 0"
      >
        <template slot="set" slot-scope="{ row, index }">
          <a @click="delSelectData(row, index)">详情</a>
        </template>
      </Table>
      <div class="content_body_page">
        <Page
          :page-size-opts="[10, 20, 30, 40, 100]"
          @on-page-size-change="changeSize"
          @on-change="changePage"
          :current="pageIndex"
          show-total
          show-elevator
          :total="total"
          show-sizer
          :page-size="pageSize"
        />
      </div>
    </div>
    <ColumnSetup
      ref="child"
      :tableModalTableDataHeader="tableModalTableDataHeader"
      :formModalColumns="formModalColumns"
      :tableModalColumns="tableModalColumns"
      :tableModalTableData="tableModalTableData"
      :showModal="showModal"
      @event1="change($event)"
      @handleModalOk="handleModalOk"
    />
    <Modal
      v-model="searchModal"
      title="查找"
      @on-ok="searchModalOk"
      @on-cancel="searchModal = false"
      width="700"
    >
      <Form :model="formItem" :label-width="85">
        <Row
          style="
            display: flex;
            justify-content: center;
            border-bottom: 1px solid #e8eaec;
            padding: 20px;
          "
        >
          <Col span="11">
            <Form-item label="选择器">
              <Select
                clearable
                v-model="formItem.select"
                placeholder="请选择"
                style="width: 200px"
              >
                <Option value="beijing">北京市</Option>
                <Option value="shanghai">上海市</Option>
                <Option value="shenzhen">深圳市</Option>
              </Select>
            </Form-item>
          </Col>
          <Col span="11">
            <Form-item label="日期控件">
              <Date-picker
                clearable
                :value="formItem.date"
                format="yyyy/MM/dd"
                type="daterange"
                placement="bottom-end"
                placeholder="选择日期"
                style="width: 200px"
              ></Date-picker>
            </Form-item>
          </Col>
        </Row>
        <div
          style="
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            padding: 20px;
            border-bottom: 1px solid #e8eaec;
          "
        >
          <Form-item label="订单编号">
            <Input
              clearable
              v-model="formItem.order_no"
              placeholder="请输入订单编号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="项目名称">
            <Input
              clearable
              v-model="formItem.project_name"
              placeholder="请输入项目名称"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="对方单号">
            <Input
              clearable
              v-model="formItem.adverse_odd"
              placeholder="请输入对方单号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="业务员">
            <Input
              clearable
              v-model="formItem.salesman"
              placeholder="请输入业务员"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="客户名称">
            <Select
              clearable
              v-model="formItem.customer_name"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="产品名称">
            <Input
              clearable
              v-model="formItem.product_name"
              placeholder="请输入产品名称"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="客户地区">
            <Select
              clearable
              v-model="formItem.client_area"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="楼层编号">
            <Input
              clearable
              v-model="formItem.floor_number"
              placeholder="请输入楼层编号"
              style="width: 200px"
            ></Input>
          </Form-item>
          <Form-item label="审核状态">
            <Select
              clearable
              v-model="formItem.audit_status"
              placeholder="请选择"
              style="width: 200px"
            >
              <Option value="beijing">北京市</Option>
              <Option value="shanghai">上海市</Option>
              <Option value="shenzhen">深圳市</Option>
            </Select>
          </Form-item>
          <Form-item label="通用产品码">
            <Input
              clearable
              v-model="formItem.universal_product_code"
              placeholder="请输入通用产品码 "
              style="width: 200px"
            ></Input>
          </Form-item>
        </div>
        <div>
          <Form-item label="">
            <Checkbox-group
              v-model="formItem.checkbox"
              style="padding-top: 20px"
            >
              <Checkbox style="width: 100px" label="尺寸确认"></Checkbox>
              <Checkbox style="width: 100px" label="发货"></Checkbox>
              <Checkbox style="width: 100px" label="分箱"></Checkbox>
              <Checkbox style="width: 100px" label="套料"></Checkbox>
              <Checkbox style="width: 100px" label="流程卡"></Checkbox>
              <Checkbox style="width: 100px" label="工艺"></Checkbox>
              <Checkbox style="width: 100px" label="收款"></Checkbox>
              <Checkbox style="width: 100px" label="已下达"></Checkbox>
              <Checkbox style="width: 100px" label="价格审核"></Checkbox>
              <Checkbox style="width: 100px" label="入库"></Checkbox>
              <Checkbox style="width: 100px" label="外协"></Checkbox>
            </Checkbox-group>
          </Form-item>
        </div>
      </Form>
    </Modal>
  </div>
</template>
<script>
import TopTitle from "../../components/TopTitle/index";
import ColumnSetup from "../../components/columnSetup/index.vue";
import { dataInJs } from "./index.js";
export default {
  components: {
    TopTitle,
    ColumnSetup,
  },
  data() {
    return {
      arrList: dataInJs(),
      ifCheckAll: false,
      formItem: {},
      searchModal: false,
      showModal: false,
      selectData: [],
      searchData: {
        start_time: "",
        end_time: "",
      },
      pageSize: 10,
      pageIndex: 1,
      total: 0,
      tableData: [],
      pointList: [
        {
          value: "1",
          label: "升序",
        },
        {
          value: "2",
          label: "降序",
        },
      ],
      tableModalTableDataHeader: [
        {
          is_show: false,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "order_type",
          value: "订单类型",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "order_status",
          value: "订单状态",
          title: "订单状态",
        },
        {
          is_show: true,
          key: "salesman",
          value: "业务员",
          title: "业务员  ",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          title: "订单创建时间",
        },
        {
          is_show: true,
          key: "project_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          value: "生产进度",
          title: "生产进度",
        },

        {
          is_show: true,
          key: "delivery_date",
          value: "预估交付日期",
          title: "预估交付日期",
        },
        {
          is_show: true,
          key: "delivery_date",
          value: "操作",
          title: "操作",
        },
      ],
      tableColumns: [
        {
          title: "id",
          align: "center",
          minWidth: 100,
          key: "id",
        },
        {
          title: "尺寸确认",
          align: "center",
          width: 100,
          key: "size",
          is_show: true,
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.size == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "订单编号",
          align: "center",
          width: 100,
          key: "size",
          is_show: true,
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.size == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "工艺",
          align: "center",
          width: 80,

          key: "craft",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.craft == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "分箱",
          align: "center",
          width: 80,
          key: "binning",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.binning == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "已下达",
          align: "center",
          width: 90,

          key: "processed",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.processed == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "流程卡",
          align: "center",
          width: 90,
          key: "flowCard",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.flowCard == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "入库",
          align: "center",
          width: 80,

          key: "entry",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.entry == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "发货",
          align: "center",
          width: 80,

          key: "shipments",
          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.shipments == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "收款",
          align: "center",
          width: 90,

          key: "gathering",

          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.gathering == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "套料",
          align: "center",
          width: 90,

          key: "jacking",

          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.jacking == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "价格审核",
          align: "center",
          width: 100,

          key: "priceReview",

          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.priceReview == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "外协",
          align: "center",
          width: 90,

          key: "outsource",

          render: (h, params) => {
            return h("div", [
              h("Checkbox", {
                props: {
                  value: params.row.outsource == 0 ? true : false,
                  disabled: true,
                },
              }),
            ]);
          },
        },
        {
          title: "分厂",
          align: "center",
          minWidth: 100,
          key: "branch",
        },
        {
          title: "MES",
          align: "center",
          minWidth: 100,
          key: "MSE",
        },
        {
          title: "单据状态",
          align: "center",

          minWidth: 100,
          key: "receiptsState",
          render: (h, params) => {
            return h(
              "span",
              params.row.receiptsState == 0 ? "未审核" : "已审核"
            );
          },
        },
        {
          title: "客户编号",

          align: "center",
          minWidth: 100,

          key: "customerId",
        },
        {
          title: "客户名称",

          align: "center",
          minWidth: 100,

          key: "customerName",
        },
        {
          title: "地区",
          align: "center",
          minWidth: 100,
          key: "region",
        },
        {
          title: "工程ID",
          align: "center",
          minWidth: 100,
          key: "projectId",
        },
        {
          title: "工程名称",
          align: "center",
          minWidth: 100,
          key: "projectName",
        },
        {
          title: "合同编号",
          align: "center",
          minWidth: 100,
          key: "contractNumber",
        },
        {
          title: "对方编号",
          align: "center",
          minWidth: 100,
          key: "adverseNumber",
        },
        {
          title: "包装方式",
          align: "center",
          minWidth: 100,
          key: "mannerPacking",
        },
        {
          title: "订单类型",
          align: "center",
          minWidth: 100,

          key: "orderType",
        },
        {
          title: "铝条方式",
          align: "center",
          minWidth: 100,
          key: "aluminiumType",
        },
        {
          title: "业务员",
          align: "center",
          minWidth: 100,

          key: "salesman",
        },
        {
          title: "联系人",
          align: "center",
          minWidth: 100,

          key: "linkman",
        },
        {
          title: "联系电话",
          align: "center",
          minWidth: 100,

          key: "phone",
        },
        {
          title: "报表日期",
          align: "center",
          minWidth: 120,

          key: "reportDate",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.reportDate));
          },
        },
        {
          title: "总周长",
          align: "center",
          minWidth: 100,

          key: "perimeter",
        },
        {
          title: "总数量",
          align: "center",
          minWidth: 100,

          key: "total",
        },
        {
          title: "总结算面积",
          align: "center",
          minWidth: 100,
          key: "settlementArea",
        },
        {
          title: "总金额",
          align: "center",
          minWidth: 100,

          key: "totalMoney",
        },
        {
          title: "收款金额",
          align: "center",
          minWidth: 100,

          key: "receivableAmount",
        },
        {
          title: "折扣金额",
          align: "center",
          minWidth: 100,
          key: "discountAmount",
        },
        {
          title: "欠款金额",
          align: "center",
          minWidth: 100,
          key: "debtAmount",
        },
        {
          title: "总实际面积",
          align: "center",
          minWidth: 100,
          key: "actualArea",
        },
        {
          title: "工艺员",
          align: "center",
          minWidth: 100,
          key: "technologist",
        },
        {
          title: "打印次数",
          align: "center",
          minWidth: 100,

          key: "printTime",
        },
        {
          title: "标签次数",
          align: "center",
          minWidth: 100,

          key: "labelTime",
        },
        {
          title: "制单员",
          align: "center",
          minWidth: 100,

          key: "makingPart",
        },
        {
          title: "制单日期",
          align: "center",

          minWidth: 120,
          key: "documentationDate",
          render: (h, params) => {
            const { row } = params;
            return h(
              "span",
              {},
              this.func.replaceDateNoHMS(row.documentationDate)
            );
          },
        },
        {
          title: "审核人",
          align: "center",
          minWidth: 100,

          key: "auditor",
        },
        {
          title: "审核日期",
          align: "center",
          minWidth: 120,

          key: "approvalDate",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.approvalDate));
          },
        },
        {
          title: "交货日期",
          align: "center",
          minWidth: 120,

          key: "deliveryDate",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.deliveryDate));
          },
        },
        {
          title: "生产交期",
          align: "center",
          minWidth: 120,

          key: "producedDate",
          render: (h, params) => {
            const { row } = params;
            return h("span", {}, this.func.replaceDateNoHMS(row.producedDate));
          },
        },
        {
          title: "送货地址",
          align: "center",
          minWidth: 100,

          key: "deliveryAddress",
        },
        {
          title: "附件",
          align: "center",
          minWidth: 100,

          key: "accessory",
        },
        {
          title: "加工要求",
          align: "center",
          minWidth: 100,

          key: "process",
        },
        {
          title: "结算币种",
          align: "center",
          minWidth: 100,

          key: "settleAccounts",
        },
        {
          title: "付款条件",
          align: "center",
          minWidth: 100,

          key: "paymentClause",
        },
        {
          title: "加工要求",
          align: "center",
          minWidth: 100,
          key: "process",
        },
        {
          title: "特别备注",
          align: "center",
          minWidth: 100,
          key: "specialNote",
        },
        {
          title: "备注",
          align: "center",
          minWidth: 100,
          key: "remark",
        },
        {
          title: "CrmId",
          align: "center",
          minWidth: 100,
          key: "crmId",
        },
        {
          title: "来源",
          align: "center",
          minWidth: 100,
          key: "source",
        },
        {
          title: "操作",
          align: "center",
          minWidth: 100,
          slot: "set",
        },
      ],
      newTableColumns: [],
      formModalColumns: [
        {
          type: "selection",
          width: 55,
          align: "center",
        },
        {
          title: "全部字段",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          slot: "title",
        },
        {
          title: "排序方式",
          align: "center",
          key: "sortord",
          minWidth: 100,
          slot: "sortord",
        },
        {
          title: "排序优先级",
          align: "center",
          key: "priority",
          minWidth: 100,
          render: (h, params) => {
            return h(
              "Select",
              {
                props: {
                  value: params.row.priority,
                },
                on: {
                  "on-change": (event) => {
                    this.formModalColumns[params.index][params.column.key] =
                      event; //获取编辑行的inde和编辑字段名，对表格数据进行重新赋值
                  },
                },
              },
              this.pointList.map(function (type) {
                return h(
                  "Option",
                  {
                    props: {
                      value: type.value,
                      key: type.label,
                    },
                  },
                  type.label
                );
              })
            );
          },
        },
      ],
      tableModalTableData: [
        {
          is_show: true,
          key: "order_no",
          value: "订单编号",
          title: "订单编号",
        },
        {
          is_show: true,
          key: "order_type",
          value: "订单类型",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "order_status",
          value: "订单状态",
          title: "订单状态",
        },
        {
          is_show: true,
          key: "salesman",
          value: "业务员",
          title: "业务员  ",
        },
        {
          is_show: true,
          key: "warning_state",
          value: "紧急程度",
          title: "紧急程度",
        },
        {
          is_show: true,
          key: "crt_time",
          value: "订单创建时间",
          title: "订单创建时间",
        },
        {
          is_show: true,
          key: "project_name",
          value: "项目名称",
          title: "项目名称",
        },
        {
          is_show: true,
          key: "start_time",
          value: "订单开始日期",
          title: "订单开始日期",
        },
        {
          is_show: true,
          key: "end_time",
          value: "订单交付日期",
          title: "订单交付日期",
        },
        {
          is_show: true,
          key: "complete_rate",
          value: "生产进度",
          title: "生产进度",
        },

        {
          is_show: true,
          key: "delivery_date",
          value: "预估交付日期",
          title: "预估交付日期",
        },
      ],
      tableModalColumns: [
        {
          type: "selection",
          width: 55,
          align: "center",
        },
        {
          title: "字段名",
          align: "center",
          key: "value",
          minWidth: 100,
        },
        {
          title: "展示名称",
          align: "center",
          key: "title",
          minWidth: 100,
          slot: "screenTitle",
        },
      ],
    };
  },
  watch: {
    ifCheckAll(newValue) {
      console.log(newValue);
      this.$nextTick(() => {
        this.$refs.selection1.selectAll(newValue);
        console.log(this.$refs.selection1, "测试");
      });
    },
  },
  mounted() {
    this.axios({
      url: "/PalDW/Pal.E8.BusinessRulesLayer.OpenAPI.RightMrg.remote",
      //设置请求头请求格式为JSON
      //设置token 其中K名要和后端协调好
      method: "post",
      data: { Method: "GetServerNow", Params: [] },
      headers: { "Content-Type": "cjq", "Access-Control-Allow-Origin": "*" },
    }).then((res) => {});
    //   function xhr(){
    //   let xhr = new XMLHttpRequest();
    //  xhr.onreadystatechange = function() {
    //         if (xhr.readyState == 4) {
    //             if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    //                 console.log(xhr.responseText);
    //             } else {
    //                 alert("Request was unsuccessful: " + xhr.status);
    //             }
    //         }
    //     };
    //     xhr.setRequestHeader({'Content-Type': 'application/json'});
    //     xhr.open("post", "http://mes.im2x.com:9012/PalDW/Pal.E8.BusinessRulesLayer.OpenAPI.RightMrg.remote", true);
    //     xhr.send(null);};
    //   xhr();
    this.tableData = [
      {
        id: 1,
        size: 0,
        craft: 0, //工艺
        binning: 0, // 分箱
        processed: 1, //已下达
        flowCard: 0, //流程卡
        entry: 1, //入库
        shipments: 0, //发货
        gathering: 0, //收款
        jacking: 1, // 套料
        priceReview: 1, //价格审核
        outsource: 1, // 外协
        branch: "分厂",
        MSE: "这是MSE",
        receiptsState: 1, // 0 未审核 1 已审核
        customerId: "这是客户编号",
        customerName: "这是客户名称",
        region: "这是地区",
        projectId: "这是工程ID",
        projectName: "这是工程名称",
        receiptNumber: "这是单据编号",
        contractNumber: "这是合同编号",
        adverseNumber: "这是对方编号",
        mannerPacking: "这是包装方式",
        orderType: 0, //0 普通订单
        aluminiumType: "这是铝条方式",
        salesman: "这是业务员",
        linkman: "这是联系人",
        phone: "17886512521",
        reportDate: "1652852478", //报表日期
        perimeter: "145.123", //总周长
        total: "", //总数量
        settlementArea: "175.21331", //总结算面积
        totalMoney: "500", //总金额
        receivableAmount: "收款金额",
        discountAmount: "这是折扣金额",
        debtAmount: "这是欠款金额",
        actualArea: "这是总实际面积",
        technologist: "这是工艺员",
        printTime: 0, //打印次数
        labelTime: 0, //标签次数
        makingPart: "这是制单员",
        documentationDate: "1652852478", //制单日期
        auditor: "这时审核人", // 审核人
        approvalDate: "1652852478", // 审核日期
        deliveryDate: "1652852478", //交货日期
        producedDate: "1652852478", //生产交期
        deliveryAddress: "这是送货地址",
        accessory: "这是附件",
        process: "这是加工要求",
        settleAccounts: "人民币",
        paymentClause: "这是付款条件",
        specialNote: "这是特别备注",
        remark: "这是备注",
        crmId: "这是crmid",
        source: "这是来源",
      },
    ];
    this.data();
    console.log(dataInJs());
  },
  methods: {
    //点击栏目设置按钮
    showModalTrue() {
      this.showModal = true;
      this.$refs.child.showModalTrue();
    },
    change(data) {
      this.showModal = data;
    },
    data() {
      this.newTableColumns = this.arrList;
      let arr = [];
      this.tableColumns.forEach((e) => {
        this.newTableColumns.forEach((a) => {
          if (e.key == a.key) {
            if (a.ifShow == true) {
              arr.push(e);
            }
          }
        });
      });
      this.tableColumns = arr;
      this.tableColumns.sort((a, b) => {
        return a.sort - b.sort;
      });
    },
    changeSize() {},
    changePage() {},
    //点击栏目设置按钮
    showModalTrue() {
      this.showModal = true;
      this.$refs.child.showModalTrue();
    },
    handleModalOk(row1, row2) {
      console.log(row1, "这个是checkedListHeader");
      console.log(row2, "这是checkedList");
    },
    searchModalOk() {
      console.log("查找");
    },
    select(e) {
      this.selectData = e;
    },
    // save() {
    //   if (this.selectData.length == 0) {
    //     return this.$Message.warning("请先选择数据！");
    //   }
    //   this.selectData.forEach((v, idx) => {
    //     v.index = idx + 1;
    //   });
    //   this.axios.post("/api/save", { data: this.selectData }).then((res) => {
    //     if (res.code == 200) {
    //       this.$Message.success(res.msg);
    //       this.searchData = { start_time: "", end_time: "" };
    //       this.tableData = [];
    //       this.selectData = [];
    //     }
    //   });
    // },
    // initData() {
    //   this.axios.post("/api/build_list", { ...this.searchData }).then((res) => {
    //     this.tableData = res.data;
    //     this.selectData = [];
    //   });
    // },
    delSelectData(type) {
      this.$router.push({ path: "/cms/product/particulars", query: { type } });
    },
  },
};
</script>
<style lang="scss" scoped>
.form_item {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.content_body_page {
  text-align: center;
}
.content {
  height: 90%;
  overflow: auto;
}
.content_body_page {
  text-align: center;
  margin-top: 20px;
}
</style>