提交

src/views/equipment/basicInfo.vue

+<template>
+  <div class="app-container">
+    <el-form ref="queryForm" style="padding: 0 0 0 10px" :model="queryParams" :inline="true">
+      <el-form-item label="设备编码" prop="equipmentCode">
+        <el-input
+          v-model="queryParams.equipmentCode"
+          placeholder="请输入设备编码"
+          clearable
+          :maxlength="30"
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="lot" prop="lot">
+        <el-input
+          v-model="queryParams.roleKey"
+          placeholder="请输入设备lot"
+          clearable
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="位置" prop="location">
+        <el-input
+          v-model="queryParams.location"
+          placeholder="请输入设备位置"
+          clearable
+          size="small"
+          style="width: 150px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
+      </el-form-item>
+      <div style="float: right">
+        <el-form-item>
+          <el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" :haspermi="addHaspermi" @click="handleAdd">
+            {{ addName }}
+          </el-button>
+        </el-form-item>
+      </div>
+    </el-form>
+    <div class="placeholder" />
+    <div style="padding:5px 10px">
+      <div class="mb12 font-small-bold">设备管理列表</div>
+      <el-table v-loading="loading" border :data="equipmentList" @selection-change="handleSelectionChange">
+        <el-table-column type="index" label="序号" width="80" />
+        <el-table-column label="编码" prop="equipmentCode" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.equipmentCode || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="lot" prop="lot" width="120">
+          <template slot-scope="scope">
+            {{ scope.row.lot || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="位置" prop="location">
+          <template slot-scope="scope">
+            {{ scope.row.location || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="厚度" prop="thickness">
+          <template slot-scope="scope">
+            {{ scope.row.thickness || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作员" prop="createBy">
+          <template slot-scope="scope">
+            {{ scope.row.createBy || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作时间" :show-overflow-tooltip="true" align="center" prop="createTime">
+          <template slot-scope="scope">
+            <span>{{ scope.row.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" class-name="small-padding fixed-width" width="150px">
+          <template slot-scope="scope">
+            <el-button :type="typeParent" :size="size" @click="handleDetail(scope.row)">
+              详情
+            </el-button>
+            <el-button
+              size="mini"
+              type="text"
+              @click="handleDelete(scope.row)"
+            >删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改设备配置对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
+        <el-form-item label="编码" prop="roleKey">
+          <el-input show-word-limit :maxlength="30" placeholder="请输入设备编码" />
+        </el-form-item>
+        <el-form-item label="lot" prop="roleSort">
+          <el-input-number style="width: 100%" controls-position="right" :min="0" />
+        </el-form-item>
+        <el-form-item label="位置" prop="roleName">
+          <el-input show-word-limit :maxlength="30" placeholder="请输入设备位置" />
+        </el-form-item>
+        <el-form-item label="厚度" prop="roleName">
+          <el-input show-word-limit :maxlength="30" placeholder="请输入设备厚度" />
+        </el-form-item>
+        <el-form-item label="备注">
+          <el-input maxlength="200" show-word-limit type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="cancel">取 消</el-button>
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+      </div>
+    </el-dialog>
+    <!-- TODO: 单项详情信息表单配置 -->
+    <el-dialog class="aboutSingleDetails" :title="title" :visible.sync="openDetails" width="700px" append-to-body>
+      <el-form ref="formDetails" :model="singleDetails" size="small" label-width="90px">
+        <el-form-item label="编码：" prop="processName">
+          <el-input v-model.trim="singleDetails.equipmentCode" :readonly="true" />
+        </el-form-item>
+        <el-form-item label="lot：" prop="workshop">
+          <el-input v-model.trim="singleDetails.lot" :readonly="true" />
+        </el-form-item>
+        <el-form-item label="位置：" prop="location">
+          <el-input v-model.trim="singleDetails.location" :readonly="true" />
+        </el-form-item>
+        <el-form-item label="厚度：" prop="thickness">
+          <el-input v-model.trim="singleDetails.thickness" :readonly="true" />
+        </el-form-item>
+        <el-form-item label="操作时间：" prop="createTime">
+          {{ singleDetails.createTime | transformDateByFormat('YYYY-MM-DD HH:mm') }}
+        </el-form-item>
+        <el-form-item label="操作员：" prop="createBy">
+          <el-input v-model.trim="singleDetails.createBy" :readonly="true" />
+        </el-form-item>
+      </el-form>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {addRole, changeRoleStatus, dataScope, delRole, exportRole, getRole, updateRole} from '@/api/system/role'
+import {roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect} from '@/api/system/menu'
+import {roleDeptTreeselect, treeselect as deptTreeselect} from '@/api/system/dept'
+// import { getRolesByInsId } from '../../../api/businessManage/template'
+export default {
+  name: 'Role',
+  data() {
+    return {
+      // TODO: 表单里的单项详情参数
+      singleDetails: {
+        equipmentName: '',
+        equipmentCode: '',
+        lot: '',
+        location: '',
+        thickness: '',
+        createBy: '',
+        createTime: ''
+      },
+      // 是否显示弹出层（数据详情）
+      openDetails: false,
+      // TODO: 模拟测试数据
+      equipmentList: [{ equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '002', lot: 'xxx', location: '位置02', thickness: '70', createBy: '操作员02', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }, { equipmentCode: '001', lot: 'xxx', location: '位置01', thickness: '50', createBy: '操作员01', createTime: new Date() }],
+      typeParent: 'text',
+      typePrimary: 'primary',
+      typeSuccess: 'success',
+      nameParent: '删除',
+      resetName: '重置',
+      addName: '入库',
+      exportName: '导出',
+      updataName: '修改',
+      size: 'mini',
+      smallSize: 'small',
+      delicon: 'el-icon-delete',
+      addIcon: 'el-icon-plus',
+      exportIcon: 'el-icon-download',
+      resetIcon: '',
+      haspermi: ['sys:user:delete'],
+      resetHaspermi: ['sys:user:resetPwd'],
+      updateHaspermi: ['sys:role:update'],
+      addHaspermi: ['sys:role:add'],
+      exportHaspermi: ['sys:role:export'],
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 总条数
+      total: 0,
+      // 角色表格数据
+      roleList: [],
+      // 弹出层标题
+      title: '',
+      // 是否显示弹出层
+      open: false,
+      // 是否显示弹出层（数据权限）
+      openDataScope: false,
+      // 日期范围
+      // dateRange: [],
+      // 菜单表格数据
+      menuList: [],
+      menuExpand: false,
+      menuNodeAll: false,
+      deptExpand: true,
+      deptNodeAll: false,
+      // 状态数据字典
+      statusOptions: [
+        {
+          dictLabel: '启用',
+          dictValue: '1'
+        },
+        {
+          dictLabel: '停用',
+          dictValue: '0'
+        }
+      ],
+      // 数据范围选项
+      dataScopeOptions: [
+        {
+          value: '1',
+          label: '全部数据权限'
+        },
+        {
+          value: '2',
+          label: '自定数据权限'
+        },
+        {
+          value: '3',
+          label: '本部门数据权限'
+        },
+        {
+          value: '4',
+          label: '本部门及以下数据权限'
+        },
+        {
+          value: '5',
+          label: '仅本人数据权限'
+        }
+      ],
+      // 菜单列表
+      menuOptions: [],
+      // 部门列表
+      tOptions: [],
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        roleName: undefined,
+        roleKey: undefined,
+        flag: undefined
+      },
+      // 表单参数
+      form: {
+
+      },
+      defaultProps: {
+        children: 'children',
+        label: 'label'
+      },
+      // 表单校验
+      rules: {
+        roleName: [
+          { required: true, message: '请输入设备名称', trigger: 'blur' }
+        ],
+        roleKey: [
+          { required: true, message: '请输入设备来源', trigger: 'blur' }
+        ],
+        roleSort: [
+          { required: true, message: '请输入设备排序', trigger: 'blur' }
+        ]
+      },
+      deptOptions: []
+    }
+  },
+  /** 路由离开前存储筛选条件*/
+  beforeRouteLeave(to, from, next) {
+    this.$store.dispatch('searchSave/searchParamsSet', {
+      path: this.$route.path,
+      param: {
+        ...this.queryParams
+      }
+    })
+    next()
+  },
+  created() {
+    if (this.$store.getters.searchParams[this.$route.path]) {
+      const { searchParams } = this.$store.getters; const { path } = this.$route
+      const param = JSON.parse(searchParams[path]) // 保留着的查询条件
+      this.queryParams = { ...param }
+    }
+    this.getList()
+    // this.getDicts(dictCons['NORMAL_DISABLE']).then(response => {
+    //   this.statusOptions = response.data;
+    // });
+  },
+  methods: {
+    // TODO: 获取所选行详情信息操作
+    handleDetail(row) {
+      this.singleDetails = this.formReset
+      this.singleDetails = row
+      this.title = '详情信息'
+      this.openDetails = !this.openDetails
+    },
+    /** 查询角色列表 */
+    getList() {
+      this.loading = true
+      this.loading = false
+    },
+    /** 查询菜单树结构 */
+    getMenuTreeselect() {
+      menuTreeselect().then(response => {
+        this.menuOptions = response.data
+      })
+    },
+    /** 查询菜单列表 */
+    getMenuList(roleId) {
+      roleMenuTreeselectMC(roleId).then(response => {
+        this.menuList = this.handleTree(response.data.menus, 'businessId')
+        this.loading = false
+      })
+    },
+    /** 查询部门树结构 */
+    getDeptTreeselect() {
+      deptTreeselect().then(response => {
+        this.deptOptions = response.data
+      })
+    },
+    // 树状图节点点击选中事件
+    handleMenuCheckChange(data, check, subCheck) { // data为选中节点信息，check选中状态
+      if (data.children !== undefined && data.children !== null) { // 是否包含子节点
+        this.checkNode(data.children, check) // 调用checkNode方法
+      }
+      // // 获取所有被选中的节点信息
+      // const nodes = this.$refs.menu.getCheckedNodes(false, false)
+      // // 将获取到的信息赋值（根据自己的需求）
+      // this.custGroupDesc = nodes.map(item => item.CN_NAME)
+      // this.searchForm.custGroup = nodes.map(item => item.code)
+    },
+    // 选中所有下级节点
+    checkNode(data, check) {
+      // 遍历所有下级节点信息
+      data.forEach(item => {
+        // 通过节点信息设置选中状态
+        this.$refs.menu.setChecked(item, check, false)
+        // 是否包含下级节点，包含下级节点则选中所有下级节点
+        if (item.children !== undefined) {
+          this.checkNode(item.children, check)
+        }
+      })
+    },
+    // 所有菜单节点数据
+    getMenuAllCheckedKeys() {
+      // 目前被选中的菜单节点
+      const checkedKeys = this.$refs.menu.getHalfCheckedKeys()
+      // 半选中的菜单节点
+      const halfCheckedKeys = this.$refs.menu.getCheckedKeys()
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+      return checkedKeys
+    },
+    // 所有部门节点数据
+    getDeptAllCheckedKeys() {
+      // 目前被选中的部门节点
+      const checkedKeys = this.$refs.dept.getHalfCheckedKeys()
+      // // 半选中的部门节点
+      const halfCheckedKeys = this.$refs.dept.getCheckedKeys()
+      checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys)
+      return this.$refs.dept.getCheckedKeys()
+    },
+    /** 根据角色ID查询菜单树结构 */
+    getRoleMenuTreeselect(roleId) {
+      return roleMenuTreeselect(roleId).then(response => {
+        this.menuOptions = response.data.menus
+        return response
+      })
+    },
+    /** 根据角色ID和菜单ID查询部门树结构 */
+    getRoleDeptTreeselect(roleId, menuId) {
+      return roleDeptTreeselect(roleId, menuId).then(response => {
+        this.form.deptCheckStrictly = response.data.deptCheckStrictly
+        this.deptOptions = response.data.depts
+        this.form.dataScope = this.dataScopeOptions[response.data.dataScope - 1].value
+        return response
+      })
+    },
+    // 角色状态修改
+    handleStatusChange(row) {
+      const text = row.flag === '1' ? '启用' : '停用'
+      this.$confirm('是否确认操作?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return changeRoleStatus(row.businessId, row.flag)
+      }).then(() => {
+        this.$message({
+          message: text + '成功',
+          type: 'success'
+        })
+      }).catch(function() {
+        row.flag = row.flag === '0' ? '1' : '0'
+      })
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false
+      this.reset()
+    },
+    // 取消按钮（数据权限）
+    cancelDataScope() {
+      this.openDataScope = false
+      this.reset()
+    },
+    // 表单重置
+    reset() {
+      if (this.$refs.menu !== undefined) {
+        this.$refs.menu.setCheckedKeys([])
+      }
+      this.menuExpand = false
+      this.menuNodeAll = false
+      this.deptExpand = true
+      this.deptNodeAll = false
+      this.form = {
+        roleId: undefined,
+        businessId: undefined,
+        roleName: undefined,
+        roleKey: undefined,
+        roleSort: 0,
+        flag: '1',
+        menuIds: [],
+        menuName: undefined,
+        deptIds: [],
+        menuCheckStrictly: false,
+        deptCheckStrictly: false,
+        remark: undefined
+      }
+      this.resetForm('form')
+    },
+    /** 查询按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      // this.dateRange = []
+      this.resetForm('queryForm')
+      this.handleQuery()
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.roleId)
+      this.single = selection.length !== 1
+      this.multiple = !selection.length
+    },
+    // // 树权限（父子联动）
+    // handleCheckedTreeConnect(value, type) {
+    //   if (type === 'menu') {
+    //     this.form.menuCheckStrictly = !!value
+    //   } else if (type === 'dept') {
+    //     this.form.deptCheckStrictly = !!value
+    //   }
+    // },
+    // 树权限（全选/全不选）
+    handleCheckedTreeNodeAll(value, type) {
+      if (type === 'menu') {
+        this.$refs.menu.setCheckedNodes(value ? this.menuOptions : [])
+      } else if (type === 'dept') {
+        this.$refs.dept.setCheckedNodes(value ? this.deptOptions : [])
+      }
+    },
+    // 树权限（展开/折叠）
+    handleCheckedTreeExpand(value, type) {
+      if (type === 'menu') {
+        const treeList = this.menuOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.menu.store.nodesMap[treeList[i].id].expanded = value
+        }
+      } else if (type === 'dept') {
+        const treeList = this.deptOptions
+        for (let i = 0; i < treeList.length; i++) {
+          this.$refs.dept.store.nodesMap[treeList[i].id].expanded = value
+        }
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset()
+      this.getMenuTreeselect()
+      this.open = true
+      this.title = '设备入库'
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset()
+      const roleId = row.businessId || this.ids
+      const roleMenu = this.getRoleMenuTreeselect(roleId)
+      getRole(roleId).then(response => {
+        this.form = response.data
+        this.open = true
+        this.getMenuTreeselect(roleId)
+        this.$nextTick(() => {
+          roleMenu.then(res => {
+            this.$refs.menu.setCheckedKeys(res.data.checkedKeys)
+          })
+        })
+        this.title = '修改设备'
+      })
+    },
+    /** 分配数据权限操作 选择菜单 */
+    handleMenu(row) {
+      this.reset()
+      const roleId = row.businessId || this.ids
+      this.getMenuList(roleId) // 查询菜单列表树形显示
+      getRole(roleId).then(response => {
+        this.form = response.data
+        this.openDataScope = true
+        this.title = '分配数据权限'
+      })
+    },
+    /** 分配数据权限操作 */
+    handleDataScope(row) {
+      this.deptOptions = []
+      this.form.dataScope = undefined
+      const roleId = this.form.businessId
+      this.form.menuId = row.businessId
+      this.form.menuName = row.menuName
+      const roleDeptTreeselect = this.getRoleDeptTreeselect(roleId, this.form.menuId)
+      this.$nextTick(() => {
+        roleDeptTreeselect.then(res => {
+          this.$refs.dept.setCheckedKeys(res.data.checkedKeys)
+        })
+      })
+      this.title = '分配数据权限'
+    },
+    /** 提交按钮 */
+    submitForm: function() {
+      this.$refs['form'].validate(valid => {
+        if (valid) {
+          this.form.menuCheckStrictly = false
+          if (this.form.businessId !== undefined) {
+            // this.form.menuIds = this.getMenuAllCheckedKeys()
+            updateRole(this.form).then(response => {
+              this.msgSuccess('修改成功')
+              this.open = false
+              this.getList()
+            })
+          } else {
+            this.form.menuIds = this.getMenuAllCheckedKeys()
+            addRole(this.form).then(response => {
+              this.msgSuccess('新增成功')
+              this.open = false
+              this.getList()
+            })
+          }
+        }
+      })
+    },
+    /** 提交按钮（数据权限） */
+    submitDataScope: function() {
+      if (this.form.businessId !== undefined && this.form.menuId !== undefined) {
+        this.form.deptIds = this.getDeptAllCheckedKeys()
+        dataScope(this.form).then(response => {
+          this.msgSuccess('修改成功')
+          this.openDataScope = false
+          this.getList()
+        })
+      }
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const roleIds = row.businessId || this.ids
+      this.$confirm('是否确认操作？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return delRole(roleIds)
+      }).then(() => {
+        this.getList()
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        })
+      }).catch(function() {
+      })
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      const queryParams = this.queryParams
+      this.$confirm('是否确认操作?', '警告', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(function() {
+        return exportRole(queryParams).then(response => {
+          const blob = new Blob([response])
+          const downloadElement = document.createElement('a')
+          const href = window.URL.createObjectURL(blob)// 创建下载的链接
+          downloadElement.href = href
+          downloadElement.download = '角色信息' + '.xls' // 下载后文件名
+          document.body.appendChild(downloadElement)
+          downloadElement.click()// 点击下载
+          document.body.removeChild(downloadElement)// 下载完成移除元素
+          window.URL.revokeObjectURL(href)// 释放掉blob对象
+          // this.download(response.msg);
+        })
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.aboutSingleDetails{
+  .el-form-item{
+    .el-input >>> .el-input__inner {
+      -webkit-appearance: none;
+      background-color: #FFF;
+      background-image: none;
+      border-radius: 4px;
+      border: 0;
+      width: 100%;
+    }
+  }
+}
+.app-container {
+  font-size: 18px;
+  padding: 0;
+
+  .placeholder {
+    height: 1.3vh;
+    background-color: #F4F4F4;
+    margin-bottom: 10px
+  }
+
+  .table-drop {
+    vertical-align: 2px;
+    line-height: 20px;
+    margin-left: 15px
+  }
+
+  .el-switch {
+    margin-left: 15px;
+  }
+}
+.el-divider--vertical{
+  height: 12em;
+  width: 4px;
+}
+</style>

src/views/equipment/management.vue

@@ -37,7 +37,7 @@
       </el-form-item>
       <div style="float: right">
         <el-form-item>
-          <el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" :haspermi="addHaspermi" @btn-click="handleAdd">
+          <el-button style="padding: 8px 7px;" :type="typePrimary" :size="smallSize" :icon="addIcon" :haspermi="addHaspermi" @click="handleAdd">
             {{ addName }}
           </el-button>
         </el-form-item>

src/views/equipment/processEquipment.vue

@@ -42,7 +42,7 @@
             :type="typePrimary"
             :size="smallSize"
             :icon="addIcon"
-            @btn-click="handleAdd"
+            @click="handleAdd"
           >
             {{ addProcess }}
           </el-button>

src/views/equipment/statistic.vue

@@ -67,8 +67,8 @@ import {
   listRole,
   updateRole
 } from '@/api/system/role'
-import {roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect} from '@/api/system/menu'
-import {roleDeptTreeselect, treeselect as deptTreeselect} from '@/api/system/dept'
+import { roleMenuTreeselect, roleMenuTreeselectMC, treeselect as menuTreeselect } from '@/api/system/menu'
+import { roleDeptTreeselect, treeselect as deptTreeselect } from '@/api/system/dept'
 // import { getRolesByInsId } from '../../../api/businessManage/template'
 import * as echarts from 'echarts'